/* ═══════════════════════════════════════════════════════════════
   WM Resume Builder Pro — v2.0
   Fix : avatar BuddyBoss par défaut masqué, design moderne ++
═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   0. RESET ANTI-BUDDYBOSS
──────────────────────────────────────────────────────────── */
.medcv-bb-section,
.medcv-bb-section * { box-sizing: border-box; }

/* Filet de sécurité largeur : un champ utilisateur (titre, résumé,
   description...) contenant un très long texte sans espace ni retour à la
   ligne forcerait sinon la largeur de toute la page (voir .cv-rich plus bas
   pour le cas précis qui a déclenché ce correctif). */
.medcv-bb-section {
    overflow-wrap: break-word;
    word-break: break-word;
}

.medcv-bb-section img {
    max-width     : none !important;
    width         : auto !important;
    height        : auto !important;
    border-radius : 0 !important;
    display       : inline !important;
    vertical-align: middle;
    box-shadow    : none !important;
}

.medcv-bb-section button,
.medcv-bb-section input[type="button"],
.medcv-bb-section input[type="submit"] {
    -webkit-appearance: none !important;
    appearance        : none !important;
    line-height       : normal !important;
    width             : auto !important;
    height            : auto !important;
    padding           : 0;
    margin            : 0;
    background        : none;
    border            : none;
    box-shadow        : none !important;
    text-transform    : none !important;
    letter-spacing    : normal !important;
    border-radius     : 0;
    font-size         : inherit !important;
}

.medcv-bb-section svg {
    display      : inline-block !important;
    width        : auto !important;
    height       : auto !important;
    max-width    : none !important;
    vertical-align: middle;
    flex-shrink  : 0;
    fill         : none;
    stroke       : currentColor;
    stroke-width : 2;
    stroke-linecap  : round;
    stroke-linejoin : round;
}

.medcv-bb-section ul,
.medcv-bb-section ol { list-style: none; margin: 0; padding: 0; }
.medcv-bb-section p  { margin: 0; padding: 0; }
.medcv-bb-section h2,
.medcv-bb-section h3 { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; border: none; background: none; }
.medcv-bb-section a  { text-decoration: none; color: inherit; }

/* ────────────────────────────────────────────────────────────
   1. DESIGN TOKENS — thème clair (par défaut) + thème sombre
──────────────────────────────────────────────────────────── */
.medcv-bb-section {
    --cv-accent   : #1a6cf5;
    --cv-accent-dk: #1254cc;
    --cv-accent-lt: rgba(26,108,245,.08);
    --cv-dark     : #0d1f42;
    --cv-text     : #1e2533;
    --cv-muted    : #64748b;
    --cv-border   : #e2e8f4;
    --cv-bg       : #f7f9ff;
    --cv-white    : #ffffff;
    --cv-radius   : 20px;
    --cv-shadow   : 0 20px 60px rgba(30,30,80,.12), inset 0 1px 0 rgba(255,255,255,.6);

    /* Carte de verre : quasi opaque (95%+), volontairement. Un verre trop
       transparent (comme dans le premier essai) suppose un arrière-plan
       coloré maîtrisé — sur une vraie page BuddyBoss, le fond réel est
       blanc uni ou sombre uni, et notre bascule clair/sombre est
       indépendante du thème réel de la page (choisi via le menu Theme du
       compte). Un verre trop transparent devient alors illisible dès que
       les deux ne correspondent pas. L'identité "verre" vient maintenant
       du flou léger + bordure + ombre, jamais de la lisibilité du texte. */
    --cv-glass-bg     : rgba(255,255,255,.97);
    --cv-glass-border : rgba(15,23,42,.08);
    --cv-glass-blur   : 20px;

    /* Surfaces internes ATS/Europass/Canadien : solides (lisibilité, parsing ATS),
       pas translucides — seule l'enveloppe (ce conteneur) est en verre. */
    --cv-paper-bg     : #ffffff;
    --cv-paper-text   : #1e2533;
    --cv-paper-muted  : #5b6472;
    --cv-paper-border : #d8dee8;
    --ep-accent       : #0040c8; /* bleu officiel Europass — identique à l'original en clair */

    font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size   : 14px;
    color       : var(--cv-text);
    line-height : 1.5;
}

/* Thème sombre : appliqué en ajoutant .medcv-theme-dark sur #medcv-bb-section
   (bascule autonome, voir medcv.js — indépendante de ReadyLaunch/BuddyBoss). */
.medcv-bb-section.medcv-theme-dark {
    --cv-accent   : #8b93ff;
    --cv-accent-dk: #a5abff;
    --cv-accent-lt: rgba(139,147,255,.14);
    --cv-dark     : #f4f2ff;
    --cv-text     : #e4e2f5;
    --cv-muted    : #a6a2c4;
    --cv-border   : rgba(255,255,255,.12);
    --cv-bg       : rgba(255,255,255,.04);
    --cv-white    : rgba(255,255,255,.06);
    --cv-shadow   : 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);

    --cv-glass-bg     : rgba(20,18,32,.96);
    --cv-glass-border : rgba(255,255,255,.10);
    --cv-glass-blur   : 20px;

    --cv-paper-bg     : #14121f;
    --cv-paper-text   : #e8e6f5;
    --cv-paper-muted  : #a6a2c4;
    --cv-paper-border : rgba(255,255,255,.14);
    --ep-accent       : #6f9bff; /* plus clair que l'original #0040c8 pour rester lisible sur fond sombre */
}

/* ────────────────────────────────────────────────────────────
   2. WRAPPER — carte de verre unique
──────────────────────────────────────────────────────────── */
.medcv-bb-section {
    margin-top    : 28px;
    margin-bottom : 28px;
    border        : 1px solid var(--cv-glass-border);
    border-radius : var(--cv-radius);
    overflow      : hidden;
    background    : var(--cv-glass-bg);
    backdrop-filter: blur(var(--cv-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--cv-glass-blur)) saturate(160%);
    box-shadow    : var(--cv-shadow);
    transition    : background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* ────────────────────────────────────────────────────────────
   3. HEADER NAV
──────────────────────────────────────────────────────────── */
.medcv-bb-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    flex-wrap       : wrap;
    gap             : 8px;
    padding         : 10px 16px;
    background      : var(--cv-bg);
    border-bottom   : 1px solid var(--cv-border);
}

.medcv-section-heading {
    display     : flex !important;
    align-items : center !important;
    gap         : 7px !important;
    font-size   : .875rem !important;
    font-weight : 700 !important;
    color       : var(--cv-dark) !important;
    line-height : 1 !important;
    margin      : 0 !important;
}
.medcv-section-heading svg { width: 16px !important; height: 16px !important; stroke: var(--cv-accent) !important; }

.medcv-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.medcv-hbtn[hidden] { display: none !important; }
.medcv-hbtn {
    all            : unset !important;
    display        : inline-flex !important;
    align-items    : center !important;
    gap            : 4px !important;
    padding        : 5px 11px !important;
    border-radius  : 7px !important;
    border         : 1px solid var(--cv-border) !important;
    background     : var(--cv-white) !important;
    color          : var(--cv-muted) !important;
    font-size      : .73rem !important;
    font-weight    : 600 !important;
    cursor         : pointer !important;
    transition     : all .15s ease !important;
    white-space    : nowrap !important;
    font-family    : inherit !important;
    line-height    : 1 !important;
    box-sizing     : border-box !important;
    box-shadow     : 0 1px 2px rgba(0,0,0,.05) !important;
    user-select    : none !important;
}
.medcv-hbtn svg { width: 11px !important; height: 11px !important; flex-shrink: 0 !important; stroke: currentColor !important; }
/* La feuille d'érable (Canadien) est un pictogramme plein, pas un tracé au
   trait comme les autres icônes de ce sélecteur — reprise telle quelle de
   l'ancien plugin medicina-cv, avec le même correctif fill/stroke. */
.medcv-hbtn svg.medcv-icon-maple { fill: currentColor !important; stroke: none !important; }
.medcv-hbtn:hover {
    border-color: var(--cv-accent) !important;
    color       : var(--cv-accent) !important;
    background  : var(--cv-accent-lt) !important;
    box-shadow  : 0 2px 8px rgba(26,108,245,.14) !important;
    transform   : translateY(-1px) !important;
}
.medcv-hbtn--active, .medcv-hbtn[aria-pressed="true"] {
    background  : var(--cv-accent) !important;
    border-color: var(--cv-accent) !important;
    color       : var(--cv-accent-text, #fff) !important;
    box-shadow  : 0 2px 10px rgba(26,108,245,.3) !important;
}
.medcv-hbtn--edit {
    background  : #0d1f42 !important;
    border-color: #0d1f42 !important;
    color       : #fff !important;
}
.medcv-hbtn--edit:hover { background: #0a1830 !important; border-color: #0a1830 !important; color: #fff !important; }
/* Mode sombre : #0d1f42 (quasi identique au fond de carte) ne contrasterait
   plus assez — un bleu nuit plus clair reste nécessaire pour que le bouton
   reste visible comme un bouton, pas seulement un fond uni. */
.medcv-theme-dark .medcv-hbtn--edit {
    background  : #2a3a6b !important;
    border-color: #2a3a6b !important;
}
.medcv-theme-dark .medcv-hbtn--edit:hover {
    background  : #354885 !important;
    border-color: #354885 !important;
}

.medcv-hbtn-sep { width: 1px; height: 20px; background: var(--cv-border); margin: 0 2px; flex-shrink: 0; }

/* Bascule clair/sombre — pilule autonome, ne dépend d'aucune variable
   ReadyLaunch ni du thème BuddyBoss actif : fonctionne à l'identique
   partout (classique, ReadyLaunch, Elementor, page WordPress simple). */
.medcv-theme-toggle {
    display       : inline-flex !important;
    padding       : 3px !important;
    border-radius : 999px !important;
    background    : var(--cv-white) !important;
    border        : 1px solid var(--cv-border) !important;
    gap           : 2px !important;
}
.medcv-theme-toggle button {
    all           : unset !important;
    display       : inline-flex !important;
    align-items   : center !important;
    gap           : 4px !important;
    padding       : 5px 10px !important;
    border-radius : 999px !important;
    font-size     : .71rem !important;
    font-weight   : 700 !important;
    cursor        : pointer !important;
    color         : var(--cv-muted) !important;
    transition    : all .2s ease !important;
    line-height   : 1 !important;
}
.medcv-theme-toggle button svg { width: 12px !important; height: 12px !important; stroke: currentColor !important; flex-shrink: 0 !important; }
.medcv-theme-toggle button[aria-pressed="true"] {
    background : var(--cv-accent) !important;
    color      : var(--cv-accent-text, #fff) !important;
    box-shadow : 0 2px 8px rgba(26,108,245,.3) !important;
}

/* ────────────────────────────────────────────────────────────
   4. ÉTAT VIDE
──────────────────────────────────────────────────────────── */
.medcv-empty-state {
    display: flex; flex-direction: column; align-items: center;
    padding: 48px 24px; gap: 10px; color: var(--cv-muted); text-align: center;
}
.medcv-empty-state svg  { width: 48px !important; height: 48px !important; opacity: .2; }
.medcv-empty-state p    { margin: 0 !important; font-size: 1rem !important; font-weight: 600; color: var(--cv-dark) !important; }
.medcv-empty-state span { font-size: .83rem; }

/* ────────────────────────────────────────────────────────────
   5. RENDU CV — rich text commun
──────────────────────────────────────────────────────────── */
.medcv-render { width: 100%; min-width: 0; overflow: hidden; }

.cv-rich {
    font-size: .84rem;
    line-height: 1.7;
    color: var(--cv-text);
    overflow-wrap: break-word;
    word-break: break-word;
}
.cv-rich p              { margin: 0 0 .4em !important; }
.cv-rich ul             { list-style: disc !important; margin: .25em 0 .5em 1.4em !important; padding: 0 !important; }
.cv-rich ol             { list-style: decimal !important; margin: .25em 0 .5em 1.4em !important; padding: 0 !important; }
.cv-rich li             { margin-bottom: .18em !important; }
.cv-rich strong, .cv-rich b { font-weight: 700; }
.cv-rich em, .cv-rich i     { font-style: italic; }
.cv-rich u              { text-decoration: underline; }
.cv-rich s              { text-decoration: line-through; }
.cv-rich h2             { font-size: .95rem !important; font-weight: 700 !important; margin: .5em 0 .2em !important; color: var(--cv-dark) !important; }
.cv-rich h3             { font-size: .85rem !important; font-weight: 700 !important; margin: .4em 0 .15em !important; color: var(--cv-dark) !important; }
.cv-rich a              { color: var(--cv-accent) !important; text-decoration: underline !important; }
.cv-rich hr             { border: none !important; border-top: 1.5px solid var(--cv-border) !important; margin: .6em 0 !important; }

/* ────────────────────────────────────────────────────────────
   6. STYLE MEDICINA (« Moderne ») — colonne unique, carte de verre
──────────────────────────────────────────────────────────── */
.cv-hero {
    display    : flex;
    align-items: center;
    gap        : 20px;
    padding    : 32px 32px 20px;
}
.cv-avatar {
    display       : block !important;
    width         : 76px !important;
    height        : 76px !important;
    min-width     : 76px !important;
    max-width     : 76px !important;
    min-height    : 76px !important;
    max-height    : 76px !important;
    border-radius : 50% !important;
    border        : 3px solid var(--cv-glass-border) !important;
    object-fit    : cover !important;
    flex-shrink   : 0 !important;
    overflow      : hidden !important;
    box-shadow    : 0 8px 20px rgba(26,108,245,.22) !important;
}

.cv-hero-identity { flex: 1; min-width: 0; }

.cv-name {
    margin        : 0 0 3px !important;
    font-size     : 1.35rem !important;
    font-weight   : 800 !important;
    letter-spacing: -.02em !important;
    color         : var(--cv-dark) !important;
    line-height   : 1.2 !important;
}
.cv-title {
    margin     : 0 0 4px !important;
    font-size  : .88rem !important;
    color      : var(--cv-muted) !important;
    font-weight: 600 !important;
}
.cv-institution {
    display: flex !important; align-items: center !important; gap: 5px !important;
    margin: 0 !important; font-size: .76rem !important;
    color: var(--cv-muted) !important;
}
.cv-institution svg { width: 11px !important; height: 11px !important; }

/* Contacts du header : regroupés en 2-3 "rangées" fines plutôt qu'une
   seule rangée mélangeant tout (coordonnées directes / réseaux sociaux /
   plateformes créatives) — même logique de catégories que le formulaire
   d'édition. .cv-contact-group porte le flex-wrap ; .cv-contacts n'est
   plus qu'un empilement vertical des groupes. */
.cv-contacts { display: flex; flex-direction: column; gap: 8px; padding: 0 32px 24px; }
.cv-contact-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-contact-group--location {
    padding-top: 6px;
    border-top: 1px solid var(--cv-border);
}
.cv-contact-group--secondary {
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--cv-border);
}
.cv-contact-group--secondary .cv-contact-item {
    padding: 4px 10px;
    font-size: .68rem !important;
    background: transparent;
    border-color: transparent;
}
.cv-contact-group--secondary .cv-contact-item:hover {
    background: var(--cv-accent-lt) !important;
    border-color: var(--cv-accent) !important;
}
.cv-contact-item {
    display        : inline-flex !important; align-items: center !important; gap: 6px !important;
    font-size      : .74rem !important; font-weight: 500;
    color          : var(--cv-text) !important;
    text-decoration: none !important;
    background     : var(--cv-white); border: 1px solid var(--cv-border);
    padding        : 6px 12px; border-radius: 20px;
    transition     : background .15s ease, border-color .15s ease;
}
.cv-contact-item svg   { width: 12px !important; height: 12px !important; opacity: .8; }
.cv-contact-item:hover { background: var(--cv-accent-lt) !important; border-color: var(--cv-accent) !important; color: var(--cv-text) !important; }

.cv-moderna-body { padding: 0 32px 32px; display: flex; flex-direction: column; }

.cv-section         { margin-bottom: 24px; }
.cv-section:last-child { margin-bottom: 0; }
.cv-section-title {
    display       : flex !important; align-items: center !important; gap: 9px !important;
    font-size     : .68rem !important; font-weight: 800 !important;
    letter-spacing: .1em; text-transform: uppercase;
    color         : var(--cv-accent) !important;
    margin        : 0 0 13px !important;
}
.cv-section-title::after { content: ''; flex: 1; height: 1px; background: var(--cv-border); }
.cv-section-bar { display: none; } /* remplacé par la ligne ::after ci-dessus, conservé pour compat rétro */

.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-tag  {
    display: inline-block; padding: 5px 13px; border-radius: 20px;
    background: var(--cv-accent-lt); color: var(--cv-accent) !important;
    font-size: .75rem !important; font-weight: 600;
    border: 1px solid rgba(26,108,245,.2); line-height: 1.5;
}
.cv-tag--muted {
    background: var(--cv-bg); color: var(--cv-text) !important;
    border-color: var(--cv-border);
}
.cv-lang-list       { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-lang-list li    { font-size: .75rem !important; color: var(--cv-text); background: var(--cv-bg); border: 1px solid var(--cv-border); padding: 5px 13px; border-radius: 20px; }

.cv-certif          { margin-bottom: 12px; padding: 12px 15px; background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: 14px; }
.cv-certif:last-child { margin-bottom: 0; }
.cv-certif strong   { display: block; font-size: .82rem !important; font-weight: 700; color: var(--cv-text); margin-bottom: 1px; }
.cv-certif span     { display: block; font-size: .73rem !important; color: var(--cv-muted); }
.cv-certif em       { display: block; font-size: .71rem !important; color: var(--cv-accent); font-style: normal; margin-top: 2px; }
.cv-certif a        { display: inline-block !important; font-size: .71rem !important; color: var(--cv-accent) !important; margin-top: 4px; }

.cv-pub             { margin-bottom: 13px; padding: 12px 15px; background: var(--cv-bg); border-radius: 14px; border-left: 3px solid var(--cv-accent); }
.cv-pub:last-child  { margin-bottom: 0; }
.cv-pub strong      { display: block; font-size: .82rem !important; font-weight: 700; color: var(--cv-text); margin-bottom: 2px; }
.cv-pub-revue       { display: block; font-size: .72rem !important; color: var(--cv-muted); font-style: italic; }
.cv-pub-year        { display: block; font-size: .7rem !important; color: var(--cv-accent); }
.cv-pub-desc        { margin: 5px 0 0 !important; font-size: .77rem !important; color: var(--cv-muted); }
.cv-pub-link        { display: inline-block !important; font-size: .71rem !important; color: var(--cv-accent) !important; margin-top: 4px; }
.cv-small           { font-size: .79rem !important; color: var(--cv-muted); margin: 0 !important; }

.cv-summary   { font-size: .87rem; line-height: 1.75; color: var(--cv-text); }

.cv-entry {
    margin-bottom : 12px; padding: 16px 18px;
    background    : var(--cv-bg);
    border        : 1px solid var(--cv-border);
    border-radius : 16px;
}
.cv-entry:last-child { margin-bottom: 0; }
.cv-entry-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 3px;
}
.cv-entry-header strong { font-size: .89rem !important; font-weight: 700 !important; color: var(--cv-dark) !important; line-height: 1.3; }
.cv-entry-date {
    font-size: .71rem !important; color: var(--cv-accent) !important;
    font-weight: 600; white-space: nowrap;
    background: var(--cv-accent-lt); padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
}
.cv-entry-sub  { font-size: .78rem !important; color: var(--cv-muted) !important; margin: 0 0 6px !important; font-style: italic; }
.cv-entry-desc { margin-top: 6px; }

.cv-refs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; }
.cv-pd-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.cv-pd-item   { background: var(--cv-bg); border: 1px solid var(--cv-border); border-radius: 14px; padding: 11px 15px; }
.cv-pd-label  { display: block; color: var(--cv-muted) !important; font-size: .68rem !important; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.cv-pd-value  { display: block; font-weight: 600; font-size: .81rem !important; color: var(--cv-text); }
.cv-ref {
    background: var(--cv-bg); border: 1px solid var(--cv-border);
    border-radius: 14px; padding: 13px 15px; font-size: .77rem; transition: box-shadow .15s;
}
.cv-ref:hover  { box-shadow: 0 4px 14px rgba(26,108,245,.12); }
.cv-ref strong { display: block; font-weight: 700; margin-bottom: 3px; font-size: .81rem !important; color: var(--cv-text); }
.cv-ref span   { display: block; color: var(--cv-muted) !important; font-size: .73rem !important; margin-bottom: 1px; }
.cv-ref a      { display: block !important; color: var(--cv-accent) !important; font-size: .73rem !important; margin-top: 4px; }

/* ────────────────────────────────────────────────────────────
   7. STYLE ATS
──────────────────────────────────────────────────────────── */
/* Fond volontairement SOLIDE (pas de verre/translucidité à l'intérieur) :
   la norme ATS exige un contraste maximal et un texte parsable sans
   ambiguïté par les logiciels de tri de CV. Seule l'enveloppe
   (.medcv-bb-section) est en verre — voir section 1-2. */
.medcv-ats     { padding: 30px 36px; font-family: 'Times New Roman', Georgia, serif; background: var(--cv-paper-bg); color: var(--cv-paper-text); }
.ats-name      { font-size: 1.5rem !important; font-weight: 700 !important; text-align: center; color: var(--cv-paper-text) !important; }
.ats-title     { text-align: center; font-size: .9rem; color: var(--cv-paper-muted) !important; margin-top: 4px !important; }
.ats-contacts  {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
    margin-top: 7px !important; font-size: .78rem; color: var(--cv-paper-muted) !important;
}
/* Nouveaux wrappers avec classes distinctes social/direct */
.ats-contact-cell { padding: 0 8px; border-right: 1px solid var(--cv-paper-border); display: inline; }
.ats-contact-cell:last-child { border-right: none; }
/* Rétrocompatibilité avec les <span> directs (non wrappés en .ats-contact-cell) */
.ats-contacts span { padding: 0 8px; border-right: 1px solid var(--cv-paper-border); }
.ats-contacts span:last-child { border-right: none; }
/* Lien ATS sobre : discret, pas de couleur vive */
.ats-contact-a {
    color           : var(--cv-paper-text) !important;
    text-decoration : none !important;
}
.ats-contact-a:hover { text-decoration: underline !important; }
.ats-hr        { border: none; border-top: 2px solid var(--cv-paper-text); margin: 13px 0; opacity: .85; }
.ats-section   { margin-bottom: 16px; }
.ats-section-title {
    font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .12em;
    text-transform: uppercase; border-bottom: 1.5px solid var(--cv-paper-border);
    padding-bottom: 4px; margin-bottom: 9px !important; color: var(--cv-paper-text) !important;
}
.ats-entry          { margin-bottom: 11px; }
.ats-entry-row      { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ats-entry-row strong { font-size: .86rem !important; font-weight: 700 !important; color: var(--cv-paper-text) !important; }
.ats-entry-row span { font-size: .77rem !important; color: var(--cv-paper-muted) !important; white-space: nowrap; }
.ats-entry-sub      { font-size: .78rem !important; color: var(--cv-paper-muted) !important; font-style: italic; margin: 2px 0 4px !important; }
.ats-entry .cv-rich { font-family: inherit; font-size: .82rem; color: var(--cv-paper-text); }
.ats-entry .cv-rich ul { list-style: disc !important; margin-left: 1.2em !important; }

/* Liens dans le style ATS : norme ATS = sobriété, pas de couleur vive.
   Le lien reste cliquable à l'écran mais en gris foncé discret,
   jamais en bleu accent, pour rester conforme au format texte épuré
   attendu par les robots de tri (ATS = Applicant Tracking System). */
.ats-entry .medcv-plink,
.ats-entry a.medcv-plink {
    color           : var(--cv-paper-muted) !important;
    font-family     : inherit !important;
    font-style      : italic !important;
    text-decoration : underline !important;
}
.ats-entry .medcv-plink:hover { color: var(--cv-paper-text) !important; }

/* ────────────────────────────────────────────────────────────
   8. STYLE EUROPASS
──────────────────────────────────────────────────────────── */
/* Le bandeau bleu officiel UE (#0040c8) est une couleur de marque figée,
   volontairement identique dans les deux modes — comme l'exige la charte
   Europass. Seul le corps du document (fond/texte) s'adapte, sur fond
   papier solide (même logique que ATS, pas de translucidité interne). */
.medcv-europass { background: var(--cv-paper-bg); color: var(--cv-paper-text); }
.ep-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(90deg, #002b80, #0040c8);
    color: #fff; padding: 10px 22px;
}
.ep-logo  { display: flex !important; align-items: center !important; gap: 8px !important; font-weight: 700; font-size: .85rem !important; color: #fff !important; }
.ep-logo svg { width: 20px !important; height: 20px !important; stroke: #fff !important; }
.ep-label { font-size: .74rem; opacity: .82; color: #fff !important; font-style: italic; }
.ep-body  { padding: 24px 26px; }
.ep-section { margin-bottom: 20px; }
.ep-section-label {
    font-size: .64rem !important; font-weight: 800 !important; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ep-accent) !important;
    border-left: 3px solid var(--ep-accent); padding-left: 8px; margin-bottom: 12px !important;
}
.ep-personal { display: flex; align-items: flex-start; gap: 18px; }
/* Photo Europass — taille fixe portrait */
.ep-photo {
    display      : block !important;
    width        : 78px !important; height: 98px !important;
    min-width    : 78px !important; max-width: 78px !important;
    min-height   : 98px !important; max-height: 98px !important;
    border-radius: 4px !important; object-fit: cover !important;
    border       : 1.5px solid var(--cv-paper-border) !important; flex-shrink: 0 !important;
    box-shadow   : 0 2px 8px rgba(0,0,0,.12) !important;
}
.ep-personal-data { flex: 1; }
.ep-name     { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--ep-accent) !important; margin-bottom: 3px !important; }
.ep-subtitle { font-size: .85rem; color: var(--cv-paper-muted) !important; margin-bottom: 8px !important; }
.ep-table    { border-collapse: collapse; font-size: .77rem; width: 100%; }
.ep-table th { width: 118px; color: var(--cv-paper-muted) !important; font-weight: 600; padding: 2px 8px 2px 0; vertical-align: top; white-space: nowrap; }
.ep-table td { color: var(--cv-paper-text) !important; padding: 2px 0; }
.ep-entry {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 0 14px; margin-bottom: 13px; align-items: start;
}
.ep-entry-date    { font-size: .74rem !important; color: var(--cv-paper-muted) !important; font-weight: 600; padding-top: 2px; }
.ep-entry-content strong { display: block; font-weight: 700 !important; font-size: .86rem !important; color: var(--cv-paper-text) !important; margin-bottom: 2px; }
.ep-entry-org     { font-size: .77rem !important; color: var(--cv-paper-muted) !important; font-style: italic; margin-bottom: 3px !important; }
.ep-text          { font-size: .81rem; line-height: 1.6; color: var(--cv-paper-text) !important; margin: 0 !important; }
.ep-lang-grid     { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-lang-item     {
    background: rgba(53,104,224,.14); color: var(--ep-accent) !important;
    padding: 3px 11px; border-radius: 4px;
    font-size: .74rem !important; font-weight: 600; border: 1px solid rgba(53,104,224,.3);
}

/* ────────────────────────────────────────────────────────────
   9. STYLE CANADIEN
──────────────────────────────────────────────────────────── */
.medcv-canadien { background: var(--cv-paper-bg); color: var(--cv-paper-text); }
.ca-header  { padding: 26px 30px 0; }
.ca-name    { font-size: 1.45rem !important; font-weight: 800 !important; color: var(--cv-paper-text) !important; letter-spacing: -.02em; margin: 0 !important; }
.ca-title   { font-size: .88rem !important; color: var(--cv-accent) !important; font-weight: 600; margin: 4px 0 10px !important; }
.ca-contacts { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: .77rem; color: var(--cv-paper-muted); margin-bottom: 14px !important; }
.ca-contacts a    { color: var(--cv-accent) !important; text-decoration: none !important; }
.ca-contacts span { color: var(--cv-paper-muted) !important; }
.ca-divider { height: 3px; background: linear-gradient(90deg, var(--cv-accent) 0%, #60a5fa 100%); border-radius: 2px; }
.ca-section { padding: 16px 30px 0; }
.ca-section-title {
    font-size: .64rem !important; font-weight: 800 !important; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cv-accent) !important;
    margin-bottom: 10px !important; display: flex; align-items: center; gap: 8px;
}
.ca-section-title::after { content: ''; flex: 1; height: 1px; background: var(--cv-paper-border); }
.ca-entry       { margin-bottom: 13px; }
.ca-entry-top   { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.ca-entry-top strong { font-size: .87rem !important; font-weight: 700 !important; color: var(--cv-paper-text) !important; }
.ca-entry-date  { font-size: .72rem !important; color: var(--cv-paper-muted) !important; white-space: nowrap; }
.ca-entry-org   { font-size: .77rem !important; color: var(--cv-paper-muted) !important; font-style: italic; margin-bottom: 3px !important; }
.ca-text        { font-size: .82rem; line-height: 1.65; color: var(--cv-paper-text) !important; margin: 3px 0 0 !important; }
.ca-link        { font-size: .74rem !important; color: var(--cv-accent) !important; text-decoration: none !important; }
.ca-link:hover  { text-decoration: underline !important; }
.ca-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 14px; }
.ca-skills-subtitle { font-size: .68rem !important; font-weight: 700; color: var(--cv-paper-muted) !important; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px !important; }
.ca-tags        { display: flex; flex-wrap: wrap; gap: 5px; }
.ca-tag         { padding: 3px 10px; background: var(--cv-bg); border: 1px solid var(--cv-paper-border); border-radius: 5px; font-size: .73rem !important; color: var(--cv-paper-text) !important; font-weight: 500; }
.ca-refs-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; }
.ca-ref         { border: 1px solid var(--cv-paper-border); border-radius: 8px; padding: 11px 13px; font-size: .77rem; transition: box-shadow .15s; }
.ca-ref:hover   { box-shadow: 0 2px 8px rgba(26,108,245,.09); }
.ca-ref strong  { display: block; font-weight: 700; margin-bottom: 2px; color: var(--cv-paper-text); }
.ca-ref span    { display: block; color: var(--cv-paper-muted) !important; font-size: .71rem !important; }
.ca-ref a       { color: var(--cv-accent) !important; font-size: .71rem !important; }

/* ────────────────────────────────────────────────────────────
   10. PANNEAU ÉDITION — design moderne
──────────────────────────────────────────────────────────── */
.medcv-edit-panel {
    border-top: 1px solid var(--cv-border);
    background: linear-gradient(180deg, #f7f9ff 0%, #f2f6ff 100%);
}
.medcv-theme-dark .medcv-edit-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
}
.medcv-form-wrap { padding: 24px; max-width: 920px; margin: 0 auto; }

/* En-tête formulaire */
.medcv-form-header {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 22px; padding: 16px 18px;
    background: linear-gradient(135deg, rgba(26,108,245,.06), rgba(13,31,66,.03));
    border-radius: 10px; border: 1px solid rgba(26,108,245,.12);
}
.medcv-theme-dark .medcv-form-header {
    background: linear-gradient(135deg, rgba(139,147,255,.1), rgba(139,147,255,.03));
    border-color: rgba(139,147,255,.18);
}
.medcv-form-header-icon {
    width: 38px; height: 38px; min-width: 38px;
    background: var(--cv-accent); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(26,108,245,.3);
}
.medcv-form-header-icon svg { width: 16px !important; height: 16px !important; stroke: #fff !important; }
.medcv-form-header h3 { margin: 0 0 3px !important; font-size: .9rem !important; font-weight: 700 !important; color: var(--cv-dark) !important; }
.medcv-form-header p  { margin: 0 !important; font-size: .77rem !important; color: var(--cv-muted) !important; }

/* ────────────────────────────────────────────────────────────
   FORMULAIRE — mise en page en 2 colonnes : nav latérale + sections
──────────────────────────────────────────────────────────── */
/* Largeur responsive plutôt qu'une valeur fixe : s'élargit progressivement
   avec l'écran (jusqu'à 262px sur grand écran) au lieu d'un saut brutal à
   un seuil précis — plus confortable sans jamais devenir disproportionné,
   quelle que soit la taille de l'appareil. */
.medcv-form-layout { display: grid; grid-template-columns: clamp(230px, 19vw, 262px) 1fr; gap: 18px; align-items: start; }
.medcv-form-main   { min-width: 0; }

/* Nav latérale (desktop/tablette large) */
.medcv-form-nav {
    position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 4px;
    background: var(--cv-white); border: 1px solid var(--cv-border); border-radius: 12px;
    padding: 10px; max-height: calc(100vh - 24px); overflow-y: auto;
}
.medcv-form-nav .nav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
    font-size: .78rem; font-weight: 600; color: var(--cv-muted); cursor: pointer;
    transition: background .15s ease; user-select: none;
}
.medcv-form-nav .nav-item:hover { background: var(--cv-bg); }
.medcv-form-nav .nav-item.active { background: var(--cv-accent-lt); color: var(--cv-accent); }
.medcv-form-nav .nav-item svg { width: 16px !important; height: 16px !important; max-width: 16px !important; flex-shrink: 0; }
.medcv-form-nav .nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sélecteur mobile — remplace la nav latérale sous 820px (voir media query) */
.medcv-mobile-nav {
    display: none; width: 100%; margin-bottom: 12px;
    padding: 10px 12px; border: 1.5px solid var(--cv-border); border-radius: 9px;
    font-size: .82rem; font-weight: 600; background: var(--cv-white); color: var(--cv-text);
    font-family: inherit;
}

/* Sections en accordéon (remplacent les anciens fieldsets) */
.section {
    background: var(--cv-white); border: 1px solid var(--cv-border); border-radius: 12px;
    margin-bottom: 10px; overflow: hidden; transition: border-color .15s;
}
.section-head {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; user-select: none;
}
.section-icon {
    width: 32px; height: 32px; border-radius: 8px; background: var(--cv-bg); color: var(--cv-accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.section-icon svg { width: 16px !important; height: 16px !important; max-width: 16px !important; }
.section-head-text { flex: 1; min-width: 0; }
.section-title { font-size: .84rem !important; font-weight: 700 !important; color: var(--cv-dark) !important; margin: 0 !important; }
.section-sub   { font-size: .71rem !important; color: var(--cv-muted) !important; margin: 1px 0 0 !important; }
/* scroll-margin-top : quand scrollIntoView() amène une section en haut de
   l'écran, laisse quand même de la place pour une éventuelle barre de nav
   sticky au-dessus — géré nativement par le navigateur, sans calcul JS. */
.section, #medcv-job-section { scroll-margin-top: 88px; }

.section-chevron { color: var(--cv-muted); transition: transform .25s ease; flex-shrink: 0; width: 18px !important; height: 18px !important; max-width: 18px !important; }
.section.open .section-chevron { transform: rotate(180deg); }

/* Ouverture/fermeture animée de l'accordéon. La hauteur exacte est
   mesurée et pilotée en JS (medcvExpandSection/medcvCollapseSection dans
   medcv.js) plutôt qu'avec un max-height fixe en dur ici : une valeur
   codée en dur "sauterait" au lieu de glisser (si trop grande par rapport
   au contenu réel) ou tronquerait une section qui grandit dynamiquement
   (ex. ajout d'une expérience via le répéteur). Le CSS ne décrit que
   l'état de repos fermé + les transitions ; JS garde la durée du
   max-height (SECTION_ANIM_MS = 260ms) synchronisée avec celle définie
   ici. visibility est retardée uniquement à la fermeture, pour qu'un
   champ masqué ne reste jamais focusable au clavier pendant qu'il est
   encore visuellement en train de se refermer. */
.section-body {
    padding: 0 16px 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .26s ease, opacity .2s ease, visibility 0s linear .26s;
}
.section.open .section-body {
    opacity: 1;
    visibility: visible;
    transition: max-height .26s ease, opacity .2s ease;
}

.section.job-highlight { border: 1.5px solid color-mix(in srgb, var(--cv-accent) 28%, transparent); }
.section.job-highlight .section-icon { background: rgba(22,163,74,.12); color: #16a34a; }

.medcv-optional-label { font-weight: 400 !important; color: var(--cv-muted) !important; font-size: .72rem !important; }

/* Bascule de visibilité (œil) par champ — mini switch (même langage
   visuel que .medcv-theme-toggle et .medcv-toggle-track/-thumb : piste +
   curseur qui glisse, couleurs via les tokens --cv-*, donc adapté au
   thème sombre sans règle dupliquée).
   Tout est qualifié par ".medcv-bb-section" et marqué !important : sans
   ça, le reset générique ".medcv-bb-section button { width:auto!important;
   height:auto!important; ... }" plus haut dans ce fichier (spécificité
   0-1-1) écrase un simple ".medcv-vis-btn" (0-1-0) — c'est ce qui
   produisait le gros bouton bleu plein qui cassait l'alignement de la
   ligne. Qualifier avec ".medcv-bb-section" porte la spécificité à 0-2-0,
   qui gagne dans tous les cas. */
.medcv-field-label-row {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important;
    min-height: 20px !important;
}
.medcv-bb-section .medcv-vis-btn {
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 30px !important; height: 16px !important;
    flex: 0 0 30px !important;
    padding: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--cv-accent-lt) !important;
    border: 1px solid color-mix(in srgb, var(--cv-accent) 35%, transparent) !important;
    cursor: pointer !important;
    line-height: normal !important;
    box-shadow: none !important;
    position: relative !important;
    transition: background .2s ease, border-color .2s ease !important;
}
.medcv-bb-section .medcv-vis-btn:hover { border-color: var(--cv-accent) !important; }
.medcv-bb-section .medcv-vis-btn:focus-visible { outline: 2px solid var(--cv-accent) !important; outline-offset: 2px !important; }
.medcv-bb-section .medcv-vis-btn.is-hidden {
    background: var(--cv-bg) !important;
    border-color: var(--cv-border) !important;
}
.medcv-bb-section .medcv-vis-thumb {
    display: flex !important; align-items: center !important; justify-content: center !important;
    position: relative !important; /* ancre les deux icônes (position:absolute) au centre du curseur, pas du bouton */
    width: 12px !important; height: 12px !important; flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: var(--cv-accent) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
    transform: translateX(14px) !important;
    transition: transform .2s ease, background .2s ease !important;
}
.medcv-bb-section .medcv-vis-btn.is-hidden .medcv-vis-thumb {
    background: var(--cv-muted) !important;
    transform: translateX(0) !important;
}
.medcv-bb-section .medcv-vis-icon {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important; /* centre l'icône (taille fixe) dans le curseur, quel que soit son SVG d'origine */
    width: 8px !important; height: 8px !important; max-width: 8px !important;
    color: #fff !important;
    opacity: 0 !important;
    transform: scale(.4) !important;
    transition: opacity .15s ease, transform .15s ease !important;
}
.medcv-bb-section .medcv-vis-icon--on  { opacity: 1 !important; transform: scale(1) !important; }
.medcv-bb-section .medcv-vis-btn.is-hidden .medcv-vis-icon--on  { opacity: 0 !important; transform: scale(.4) !important; }
.medcv-bb-section .medcv-vis-btn.is-hidden .medcv-vis-icon--off { opacity: 1 !important; transform: scale(1) !important; }

.medcv-field.is-hidden input,
.medcv-field.is-hidden select,
.medcv-field.is-hidden textarea { border-style: dashed !important; opacity: .6 !important; cursor: not-allowed !important; }

/* Pastilles Contrat/Mode de travail (Job Seeking Preferences) — jusqu'ici
   en style inline uniquement (background:#fff figé), donc jamais adaptées
   au mode sombre : texte quasi invisible sur pastille non cochée. Ces
   règles surchargent l'inline (elles s'appliquent car en feuille externe
   + !important, cf. cascade CSS) et gèrent proprement les deux thèmes. */
.medcv-job-pill-label {
    background : var(--cv-white) !important;
    color      : var(--cv-text) !important;
    border-color: var(--cv-border) !important;
}
.medcv-job-pill-label:hover { border-color: var(--cv-accent) !important; }
.medcv-job-pill-label.active {
    background : var(--cv-accent) !important;
    color      : var(--cv-accent-text, #fff) !important;
    border-color: var(--cv-accent) !important;
}
.medcv-job-pill-label.medcv-job-pill-mode.active {
    background : #7e22ce !important;
    color      : #fff !important;
    border-color: #7e22ce !important;
}
.medcv-theme-dark .medcv-job-pill-label.medcv-job-pill-mode.active { background: #9333ea !important; border-color: #9333ea !important; }

/* Répéteurs (Expérience, Formation...) : plus besoin de la règle :has()
   précédente — chaque section est déjà un accordéon isolé, l'entrée
   répétable garde sa propre carte à l'intérieur, cohérent visuellement. */

.medcv-row-2 { display: grid; grid-template-columns: 1fr 1fr;     gap: 10px; }
.medcv-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.medcv-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.medcv-row-display { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

.medcv-field        { display: flex; flex-direction: column; gap: 4px; }
.medcv-field label  { font-size: .73rem !important; font-weight: 600 !important; color: var(--cv-dark) !important; }
.medcv-field label small { font-weight: 400 !important; color: var(--cv-muted) !important; font-size: .68rem !important; }
.medcv-field .req   { color: #e53e3e; }

/* ── Responsive : tablette — colonne plus étroite qu'en desktop pour
   laisser de la place au formulaire, mais un peu plus confortable qu'avant
   (190px → 212px) ── */
@media (max-width: 980px) {
    .medcv-form-layout { grid-template-columns: 212px 1fr; gap: 14px; }
    .medcv-form-nav .nav-item { padding: 9px 10px; }
    .medcv-form-nav .nav-item span { font-size: .74rem; }
}

/* ── Responsive : mobile — nav latérale remplacée par un sélecteur,
   tout s'empile verticalement, aucun panneau latéral concurrent ── */
@media (max-width: 820px) {
    .medcv-form-layout { display: block; }
    .medcv-form-nav { display: none; }
    .medcv-mobile-nav { display: block; }
    .medcv-row-2, .medcv-row-3, .medcv-row-4 { grid-template-columns: 1fr; }
    .section-head { padding: 12px 14px; }
    .section-body { padding: 0 14px 14px; }
}


.medcv-input, .medcv-textarea, .medcv-select {
    padding      : 8px 11px !important;
    border       : 1.5px solid var(--cv-border) !important;
    border-radius: 7px !important;
    font-size    : .83rem !important;
    font-family  : inherit !important;
    color        : var(--cv-text) !important;
    background   : var(--cv-white) !important;
    transition   : border-color .15s, box-shadow .15s;
    width        : 100% !important;
    box-sizing   : border-box !important;
    box-shadow   : none !important;
    outline      : none !important;
    line-height  : 1.4 !important;
}
.medcv-input:focus, .medcv-textarea:focus, .medcv-select:focus {
    border-color: var(--cv-accent) !important;
    box-shadow  : 0 0 0 3px rgba(26,108,245,.1) !important;
}
.medcv-textarea { resize: vertical; min-height: 70px; }

/* Le chrome natif du navigateur (flèche de <select>, icône de <input
   type=date>, couleur d'autofill, curseur texte) ne suit jamais le CSS de
   couleur de la page — seule la propriété color-scheme le pilote. Sans
   ça, l'icône native resterait sombre-sur-sombre (quasi invisible) même
   si le fond du champ, lui, est correctement passé en clair/sombre. */
.medcv-bb-section { color-scheme: light; }
.medcv-bb-section.medcv-theme-dark { color-scheme: dark; }

/* Toggle */
.medcv-toggle-label  { display: flex; align-items: center; gap: 9px; font-size: .81rem !important; cursor: pointer; user-select: none; color: var(--cv-text) !important; }
.medcv-toggle-input  { display: none !important; }
.medcv-toggle-track  { width: 36px; height: 20px; background:#d1d5db; border-radius: 20px; position: relative; transition: background .2s; flex-shrink: 0; }
.medcv-theme-dark .medcv-toggle-track { background: rgba(255,255,255,.16); }
.medcv-toggle-input:checked + .medcv-toggle-track { background: var(--cv-accent); }
.medcv-toggle-thumb  { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background:#fff; border-radius: 50%; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.medcv-toggle-input:checked + .medcv-toggle-track .medcv-toggle-thumb { left: 18px; }

.medcv-color-field  { flex-direction: row !important; align-items: center !important; gap: 8px !important; }
.medcv-color-wrap   { display: flex; align-items: center; gap: 7px; }
.medcv-color-input  { width: 34px !important; height: 34px !important; padding: 2px !important; border: 1.5px solid var(--cv-border) !important; border-radius: 7px !important; cursor: pointer; background: none !important; }
.medcv-color-label  { font-size: .76rem !important; color: var(--cv-muted) !important; font-family: 'SFMono-Regular', Consolas, monospace; }

/* ────────────────────────────────────────────────────────────
   11. WYSIWYG — LISTES UNIQUEMENT (v3.0)
   Barre réduite : Liste à puces + Liste numérotée.
   Tous les boutons de formatage inline ont été supprimés.
──────────────────────────────────────────────────────────── */

/* Conteneur */
.medcv-rich-wrap {
    border        : 1.5px solid var(--cv-border);
    border-radius : 8px;
    overflow      : hidden;
    background    : var(--cv-white);
    transition    : border-color .15s, box-shadow .15s;
}
.medcv-rich-wrap:focus-within {
    border-color : var(--cv-accent);
    box-shadow   : 0 0 0 3px rgba(26,108,245,.1);
}

/* Flash rouge quand la limite est atteinte */
@keyframes medcv-limit-flash {
    0%   { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.25); }
    100% { border-color:var(--cv-accent); box-shadow:0 0 0 3px rgba(26,108,245,.1); }
}
.medcv-rich-wrap--limit { animation: medcv-limit-flash .6s ease forwards; }

/* Barre d'outils : très compacte, 2 boutons seulement */
.medcv-rich-toolbar {
    display        : flex;
    align-items    : center;
    gap            : 2px;
    padding        : 5px 8px;
    background     : linear-gradient(to bottom, #f0f4fb, #e8eef9);
    border-bottom  : 1px solid var(--cv-border);
    min-height     : 36px;
}
.medcv-theme-dark .medcv-rich-toolbar {
    background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.mrt-group {
    display        : flex;
    align-items    : center;
    gap            : 1px;
    background     : rgba(255,255,255,.5);
    border-radius  : 6px;
    padding        : 1px;
}
.medcv-theme-dark .mrt-group { background: rgba(255,255,255,.06); }

/* Boutons */
.medcv-rtb {
    all             : unset !important;
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 30px !important;
    height          : 28px !important;
    border          : 1px solid transparent !important;
    border-radius   : 5px !important;
    background      : transparent !important;
    cursor          : pointer !important;
    color           : var(--cv-muted) !important;
    font-family     : inherit !important;
    transition      : all .1s !important;
    box-sizing      : border-box !important;
    flex-shrink     : 0 !important;
}
.medcv-rtb svg {
    width           : 14px !important;
    height          : 14px !important;
    stroke          : currentColor !important;
    stroke-width    : 2 !important;
    fill            : none !important;
    stroke-linecap  : round !important;
    stroke-linejoin : round !important;
}
.medcv-rtb:hover {
    background   : var(--cv-white) !important;
    border-color : var(--cv-border) !important;
    color        : var(--cv-accent) !important;
    box-shadow   : 0 1px 3px rgba(0,0,0,.08) !important;
}
.medcv-rtb--active {
    background   : rgba(26,108,245,.12) !important;
    border-color : rgba(26,108,245,.3) !important;
    color        : var(--cv-accent) !important;
}

/* Zone éditable — taille généreuse pour les textes longs */
.medcv-rich-editor {
    min-height   : 160px;
    max-height   : 500px;
    overflow-y   : auto;
    padding      : 12px 14px !important;
    font-size    : .875rem !important;
    line-height  : 1.8 !important;
    color        : var(--cv-text) !important;
    outline      : none !important;
    font-family  : inherit !important;
    background   : var(--cv-white) !important;
    caret-color  : var(--cv-accent);
    word-break   : break-word;
    overflow-wrap: break-word;
}
.medcv-rich-editor ul { list-style:disc    !important; margin:.35em 0 .35em 1.5em !important; padding:0 !important; }
.medcv-rich-editor ol { list-style:decimal !important; margin:.35em 0 .35em 1.5em !important; padding:0 !important; }
.medcv-rich-editor li { margin-bottom:.15em !important; }
.medcv-rich-editor p  { margin:0 0 .35em !important; }

/* Placeholder */
.medcv-rich-editor:empty::before,
.medcv-rich-editor.medcv-rich--empty::before {
    content       : attr(data-placeholder);
    color         : #a0aec0;
    pointer-events: none;
    font-style    : italic;
    font-size     : .82rem !important;
}

/* Compteur de caractères */
.medcv-rich-counter {
    display         : flex;
    justify-content : flex-end;
    padding         : 4px 10px 5px;
    background:var(--cv-bg, #f8faff);
    border-top      : 1px solid var(--cv-border);
}
.medcv-rich-counter-text {
    font-size   : .69rem !important;
    color       : #94a3b8 !important;
    font-family : 'SFMono-Regular', Consolas, monospace;
    transition  : color .15s;
}
.medcv-rich-counter-text.medcv-rich-counter--warn  { color:#f59e0b !important; font-weight:600; }
.medcv-rich-counter-text.medcv-rich-counter--limit { color:#ef4444 !important; font-weight:700; }
/* ────────────────────────────────────────────────────────────
   12. REPEATERS
──────────────────────────────────────────────────────────── */
.medcv-repeater-item {
    border       : 1px solid var(--cv-border);
    border-radius: 9px; padding: 15px; margin-bottom: 10px;
    background:var(--cv-bg, #fafcff);
    transition   : box-shadow .15s, border-color .15s;
}
.medcv-repeater-item:hover { box-shadow: 0 2px 12px rgba(26,108,245,.09); border-color: rgba(26,108,245,.22); }
.medcv-repeater-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px dashed var(--cv-border);
}
.medcv-repeater-label { font-size: .71rem !important; font-weight: 700 !important; color: var(--cv-accent) !important; letter-spacing: .06em; text-transform: uppercase; }

.medcv-remove-btn {
    all           : unset !important;
    display       : flex !important; align-items: center !important; justify-content: center !important;
    width         : 22px !important; height: 22px !important;
    border-radius : 6px !important; border: 1.5px solid #fca5a5 !important;
    background:#fff5f5 !important; color: #dc2626 !important;
    cursor        : pointer !important; transition: all .14s !important;
    flex-shrink   : 0 !important; box-sizing: border-box !important;
}
.medcv-remove-btn svg   { width: 11px !important; height: 11px !important; stroke: currentColor !important; fill: none !important; }
.medcv-remove-btn:hover { background: #dc2626 !important; border-color: #dc2626 !important; color:#fff !important; }

.medcv-add-btn {
    all          : unset !important;
    display      : inline-flex !important; align-items: center !important; gap: 6px !important;
    padding      : 7px 14px !important; border-radius: 8px !important;
    border       : 1.5px dashed rgba(26,108,245,.4) !important;
    background   : rgba(26,108,245,.03) !important; color: var(--cv-accent) !important;
    font-size    : .77rem !important; font-weight: 600 !important;
    cursor       : pointer !important; transition: all .15s !important;
    margin-top   : 6px !important; font-family: inherit !important; box-sizing: border-box !important;
}
.medcv-add-btn svg   { width: 12px !important; height: 12px !important; stroke: currentColor !important; fill: none !important; }
.medcv-add-btn:hover { background: rgba(26,108,245,.08) !important; border-color: var(--cv-accent) !important; box-shadow: 0 2px 8px rgba(26,108,245,.1) !important; }

/* ────────────────────────────────────────────────────────────
   13. ACTIONS SAUVEGARDE
──────────────────────────────────────────────────────────── */
.medcv-form-actions { display: flex; align-items: center; gap: 12px; padding-top: 8px; flex-wrap: wrap; }
.medcv-btn {
    all         : unset !important;
    display     : inline-flex !important; align-items: center !important; gap: 7px !important;
    padding     : 10px 22px !important; border-radius: 9px !important;
    font-size   : .84rem !important; font-weight: 700 !important;
    cursor      : pointer !important; transition: all .15s !important;
    font-family : inherit !important; box-sizing: border-box !important;
    line-height : 1 !important; user-select: none !important;
}
.medcv-btn svg           { width: 14px !important; height: 14px !important; stroke: currentColor !important; fill: none !important; }
.medcv-btn--primary      { background: var(--cv-accent) !important; color:var(--cv-accent-text, #fff) !important; box-shadow: 0 2px 10px rgba(26,108,245,.3) !important; }
.medcv-btn--primary:hover { background: var(--cv-accent-dk) !important; box-shadow: 0 4px 16px rgba(26,108,245,.4) !important; transform: translateY(-1px) !important; }
.medcv-btn--primary:disabled { opacity: .55; cursor: not-allowed !important; transform: none !important; }

.medcv-status          { font-size: .78rem !important; font-weight: 600; padding: 7px 12px; border-radius: 7px; }
.medcv-status--success { background:#f0fdf4; color: #15803d !important; border: 1px solid #bbf7d0; }
.medcv-status--error   { background:#fef2f2; color: #b91c1c !important; border: 1px solid #fecaca; }
.medcv-status--pending { background: var(--medcv-blue-l); color: var(--medcv-blue) !important; border: 1px solid var(--medcv-blue-b); }
.medcv-status--muted   { background: var(--medcv-gray-l); color: var(--medcv-gray) !important; border: 1px solid var(--medcv-border); }
.medcv-theme-dark .medcv-status--success { background: rgba(21,128,61,.18); color: #6ee7b7 !important; border-color: rgba(21,128,61,.35); }
.medcv-theme-dark .medcv-status--error   { background: rgba(185,28,28,.18); color: #fca5a5 !important; border-color: rgba(185,28,28,.35); }
.medcv-theme-dark .medcv-status--pending { background: rgba(29,78,216,.18); color: #93c5fd !important; border-color: rgba(29,78,216,.35); }
.medcv-theme-dark .medcv-status--muted   { background: rgba(255,255,255,.06); color: #d1d5db !important; border-color: rgba(255,255,255,.15); }

/* ════════════════════════════════════════
   OFFRES D'EMPLOI — variables de thème manquantes hors .medcv-bb-section
   ════════════════════════════════════════
   Les 3 pages ci-dessous ("Publier une offre", "Mes offres",
   "Modération") ne sont PAS rendues à l'intérieur de .medcv-bb-section
   (le wrapper de la carte CV, seul endroit où --cv-accent/--cv-border/
   etc. sont définies) : .medcv-btn, .medcv-input, .medcv-select
   utilisent ces variables SANS valeur de repli, donc restent invisibles
   (fond/bordure transparents) sur ces 3 pages. Même correctif déjà
   appliqué à .medcv-recruiter-filter (voir plus haut, section 3) : on
   redéfinit localement les mêmes noms, sourcés depuis la couleur de
   marque réelle du site plutôt que d'imposer notre bleu. */
#medcv-job-form-wrap, #medcv-my-listings-wrap, #medcv-moderation-wrap {
    --medcv-blue     : var(--bb-rl-primary-color, var(--bb-primary-color, #2563eb));
    --cv-white       : var(--bb-content-background-color, #fff);
    --cv-border      : var(--bb-content-border-color, #dcdfe3);
    --cv-text        : #1e2533;
    --cv-dark        : #0d1f42;
    --cv-muted       : #8a8f98;
    --cv-accent      : var(--medcv-blue);
    --cv-accent-dk   : color-mix(in srgb, var(--medcv-blue) 82%, black);
    --cv-accent-text : #fff;
}

/* .medcv-btn seul (sans --primary) n'a AUCUN style visible ("all: unset"
   sans repli) — jusqu'ici seul .medcv-btn--primary existait. Ajout d'un
   style secondaire visible (bordure + fond clair) pour les actions
   secondaires (Modifier, Clôturer, Réouvrir, onglets de filtre). */
.medcv-btn--secondary {
    background : var(--cv-white, #fff) !important;
    color      : var(--cv-text, #1e2533) !important;
    border     : 1.5px solid var(--cv-border, #dcdfe3) !important;
}
.medcv-btn--secondary:hover {
    background : var(--cv-border, #e2e8f4) !important;
}
.medcv-theme-dark .medcv-btn--secondary {
    background : rgba(255,255,255,.06) !important;
    color      : #e5e7eb !important;
    border-color: rgba(255,255,255,.18) !important;
}

/* ════════════════════════════════════════
   OFFRES D'EMPLOI — "Mes offres" / "Modération"
   (includes/frontend/job-listing-manage.php et job-listing-moderation.php)
   ════════════════════════════════════════ */

.medcv-mylisting-row {
    border        : 1px solid var(--medcv-border);
    border-radius : var(--medcv-radius);
    padding       : 16px 18px;
    margin-bottom : 14px;
}
.medcv-mylisting-head {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 12px;
    margin-bottom  : 6px;
    flex-wrap      : wrap;
}
.medcv-mylisting-title { font-weight: 700; font-size: .95rem; }
.medcv-mylisting-meta  { font-size: .82rem; color: var(--medcv-gray); opacity: .85; margin-bottom: 10px; }
.medcv-mylisting-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.medcv-mylisting-editpanel,
.medcv-mylisting-reopenpanel {
    margin-top : 14px;
    padding-top: 14px;
    border-top : 1px dashed var(--medcv-border);
}
.medcv-mylisting-reopenpanel label {
    display       : flex;
    flex-direction: column;
    gap           : 6px;
    margin-bottom : 10px;
    font-size     : .82rem;
}
.medcv-theme-dark .medcv-mylisting-row { border-color: rgba(255,255,255,.12); }
.medcv-theme-dark .medcv-mylisting-editpanel,
.medcv-theme-dark .medcv-mylisting-reopenpanel { border-top-color: rgba(255,255,255,.12); }
.medcv-theme-dark .medcv-mylisting-meta { color: #9ca3af; }

/* ────────────────────────────────────────────────────────────
   14. RESPONSIVE
──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .cv-hero            { flex-direction: column; text-align: center; padding: 24px 20px 16px; gap: 12px; }
    .cv-contacts        { padding: 0 20px 20px; }
    .cv-contact-group   { justify-content: center; }
    .cv-moderna-body    { padding: 0 20px 24px; }
    .medcv-row-2, .medcv-row-3, .medcv-row-4 { grid-template-columns: 1fr; }
    .ep-entry          { grid-template-columns: 1fr; }
    .ep-entry-date     { margin-bottom: 4px !important; }
    .medcv-form-wrap   { padding: 14px; }
    .ca-header         { padding: 18px 16px 0; }
    .ca-section        { padding: 13px 16px 0; }
    .medcv-ats         { padding: 20px 16px; }
    .ep-body           { padding: 18px 14px; }
    .ep-personal       { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .medcv-hbtn        { padding: 4px 7px !important; font-size: .68rem !important; }
    .cv-name           { font-size: 1.15rem !important; }
    .medcv-form-header { flex-direction: column; }
    .cv-avatar         { width: 68px !important; height: 68px !important; min-width: 68px !important; max-width: 68px !important; min-height: 68px !important; max-height: 68px !important; }
    .medcv-rich-toolbar { padding: 4px 5px; }
    .mrt-sep           { margin: 0 2px; }
    .mrt-group         { padding: 1px; }
}

/* ────────────────────────────────────────────────────────────
   15. PRINT
──────────────────────────────────────────────────────────── */
@media print {
    .medcv-bb-header, .medcv-edit-panel, .medcv-empty-state { display: none !important; }
    .medcv-bb-section { border: none !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Le gabarit Modern est maintenant à colonne unique : plus besoin du
       hack display:table qui servait à fragmenter l'ancien layout 2
       colonnes sur plusieurs pages imprimées. Un flux normal se
       fragmente correctement tout seul. */

    /* Couleurs de fond forcées (dégradés de marque, jamais désactivés à l'impression) */
    .ep-topbar          { background: linear-gradient(90deg,#002b80,#0040c8) !important; }
    .ca-divider         { background: linear-gradient(90deg,var(--cv-accent),#60a5fa) !important; }
    .cv-tag             { background: rgba(26,108,245,.1) !important; }

    /* ── break-inside SEULEMENT sur les petites unités atomiques ──
       JAMAIS sur une entrée complète d'expérience/formation (cv-entry,
       ca-entry, ep-entry, ats-entry) : ces blocs peuvent contenir
       plusieurs lignes de description et dépasser la place restante
       en bas de page. Si on leur interdit toute coupure, le navigateur
       renvoie le bloc ENTIER à la page suivante -> grand espace blanc
       en bas de la page précédente (c'est exactement le bug constaté
       sur les modèles ATS et Europass). On les laisse donc se couper
       normalement d'une page à l'autre. */
    .cv-pub, .cv-certif, .cv-ref, .ca-ref {
        break-inside : avoid !important;
        page-break-inside : avoid !important;
    }

    /* En contrepartie, on évite qu'un titre d'expérience (poste + date)
       se retrouve orphelin tout seul en bas de page, séparé de sa
       description : on interdit juste la coupure APRÈS ces lignes
       d'en-tête, sans bloquer la coupure ailleurs dans le bloc. */
    .cv-entry-header, .cv-entry-sub,
    .ats-entry-row, .ats-entry-sub,
    .ep-entry-org, .ep-entry-content strong,
    .ca-entry-top, .ca-entry-org {
        break-after : avoid !important;
        page-break-after : avoid !important;
    }

    /* Les titres de section ne doivent jamais se retrouver seuls
       en bas de page, juste avant un saut de page */
    .cv-section-title, .ats-section-title,
    .ep-section-label, .ca-section-title {
        break-after : avoid !important;
        page-break-after : avoid !important;
    }

    /* Empêche qu'une seule ligne de texte/liste reste isolée
       en haut ou en bas de page (veuves/orphelines) */
    .cv-rich, .ep-text, .ats-entry .cv-rich, .cv-entry-desc {
        orphans : 3 !important;
        widows  : 3 !important;
    }

    /* .medcv-render a overflow:hidden à l'écran (pour les coins arrondis +
       l'ombre du popup), mais ni l'un ni l'autre n'existe à l'impression
       (border-radius:0, box-shadow:none déjà appliqués ailleurs). On
       repasse à overflow:visible par sécurité : overflow:hidden sur un
       conteneur qui s'étend sur plusieurs pages peut, selon le moteur de
       rendu, perturber le calcul de fragmentation et donc l'affichage du
       bandeau fixe de la colonne gauche sur certaines pages. */
    .medcv-render { overflow: visible !important; }

    /* ── PADDING IDENTIQUE PARTOUT, SUR CHAQUE PAGE ──
       Même valeur (16px), sur les 4 côtés (haut/bas/gauche/droite),
       pour TOUS les modèles à l'impression : le texte se retrouve
       toujours à la même distance du bord du fond coloré/blanc,
       quel que soit le modèle choisi (Modern, ATS, Europass, Canadien). */
    .cv-hero, .cv-contacts, .cv-moderna-body,
    .medcv-ats,
    .ep-topbar, .ep-body,
    .ca-header, .ca-section {
        padding: 16px !important;
    }

    /* box-decoration-break:clone fait en sorte que ce padding (et le fond
       coloré) se RÉPÈTE sur chaque fragment de page, et pas seulement au
       tout début / à la toute fin du bloc — sinon, pour un bloc qui
       s'étend sur 2-3 pages (.medcv-ats, .ep-body, etc.), seules la 1ère
       et la dernière page auraient ce padding. On l'applique SEULEMENT
       aux blocs qui peuvent réellement s'étendre sur plusieurs pages —
       PAS à .cv-hero / .ep-topbar, qui contiennent des
       pseudo-éléments décoratifs en overflow:hidden ; clone perturbe ce
       découpage et fait apparaître un fragment fantôme du décor plus bas
       sur la page. */
    .medcv-ats, .ep-body,
    .ca-header, .ca-section {
        box-decoration-break: clone !important;
        -webkit-box-decoration-break: clone !important;
    }
    .cv-section { margin-bottom: 12px !important; }
    .cv-entry   { margin-bottom: 9px !important; padding-bottom: 8px !important; }

    /* ── FOND COLORÉ JUSQU'AU BORD DE PAGE ──
       Pas de marge de page : le fond (bleu du header, bleu clair de la
       colonne gauche, blanc des autres modèles) doit toucher les limites
       physiques de la page. L'espace entre le texte et le bord de page
       vient UNIQUEMENT du padding interne ci-dessus (et du bandeau fixe
       de la colonne gauche), jamais d'une marge externe. */
    @page { size: A4 portrait; margin: 0; }
}

/* ────────────────────────────────────────────────────────────
   16. CONTACTS & RÉSEAUX SOCIAUX — styles communs
──────────────────────────────────────────────────────────── */

/* ── Canadien : contacts en ligne avec icônes ── */
.ca-contacts { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: .77rem; margin-bottom: 14px !important; }

.ca-contact-item {
    display        : inline-flex !important;
    align-items    : center !important;
    gap            : 5px !important;
    font-size      : .73rem !important;
    color          : var(--sc, #6366f1) !important;
    text-decoration: none !important;
    transition     : opacity .15s !important;
}
.ca-contact-item:hover  { opacity: .78 !important; }
.ca-contact-icon {
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 14px !important;
    height          : 14px !important;
    flex-shrink     : 0 !important;
    color           : var(--sc, #6366f1) !important;
}
.ca-contact-icon svg {
    width  : 13px !important;
    height : 13px !important;
    stroke : currentColor !important;
    fill   : currentColor !important;
}
/* Pour les icônes qui sont fill=none (téléphone, email, etc.) */
.ca-contact-icon svg[fill="none"] { fill: none !important; }

/* ── Grille réseaux sociaux (pied de CV Modern/ATS) ── */
.cv-social-grid {
    display   : flex;
    flex-wrap : wrap;
    gap       : 6px 14px;
    padding   : 8px 24px 16px;
    border-top: 1px solid var(--cv-border);
    margin-top: 4px;
}

.cv-social-item {
    display        : inline-flex !important;
    align-items    : center !important;
    gap            : 4px !important;
    font-size      : .72rem !important;
    font-weight    : 600 !important;
    color          : var(--sc, #6366f1) !important;
    text-decoration: none !important;
    transition     : opacity .15s !important;
}
.cv-social-item:hover   { opacity: .75 !important; }
.cv-social-icon {
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 13px !important;
    height          : 13px !important;
    flex-shrink     : 0 !important;
    color           : var(--sc, #6366f1) !important;
}
.cv-social-icon svg {
    width  : 13px !important;
    height : 13px !important;
    fill   : currentColor !important;
    stroke : none !important;
}
.cv-social-icon svg[fill="none"] { fill: none !important; stroke: currentColor !important; }

/* Certaines couleurs de marque officielles (X/Twitter #000, TikTok #010101,
   GitHub #171515) sont quasi noires — invisibles sur le fond de verre
   sombre. On les échange contre une teinte claire uniquement en mode
   sombre ; en mode clair, la couleur de marque officielle reste inchangée.
   .cv-social-icon a sa propre règle color:var(--sc) : on cible aussi
   l'icône via un sélecteur descendant, pas seulement le lien englobant. */
.medcv-theme-dark .cv-social-item[data-type="twitter"],
.medcv-theme-dark .cv-social-item[data-type="twitter"] .cv-social-icon,
.medcv-theme-dark .ca-contact-item[data-type="twitter"],
.medcv-theme-dark .ca-contact-item[data-type="twitter"] .ca-contact-icon,
.medcv-theme-dark .cv-social-item[data-type="tiktok"],
.medcv-theme-dark .cv-social-item[data-type="tiktok"] .cv-social-icon,
.medcv-theme-dark .ca-contact-item[data-type="tiktok"],
.medcv-theme-dark .ca-contact-item[data-type="tiktok"] .ca-contact-icon,
.medcv-theme-dark .cv-social-item[data-type="github"],
.medcv-theme-dark .cv-social-item[data-type="github"] .cv-social-icon,
.medcv-theme-dark .ca-contact-item[data-type="github"],
.medcv-theme-dark .ca-contact-item[data-type="github"] .ca-contact-icon {
    color: #e4e2f5 !important;
}
.cv-social-label { line-height: 1; }

/* ── Header Modern : contacts avec icônes colorées ── */
.cv-contact-item span:last-child { font-size: .72rem !important; }

/* ── Séparateur section dans le formulaire d'édition ── */
.medcv-social-section-label {
    display     : flex;
    align-items : center;
    gap         : 7px;
    font-size   : .71rem !important;
    font-weight : 700 !important;
    color       : var(--cv-muted) !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin      : 14px 0 8px !important;
}
.medcv-social-section-label svg {
    width  : 12px !important;
    height : 12px !important;
    stroke : currentColor !important;
    fill   : none !important;
    flex-shrink: 0 !important;
}
.medcv-social-section-label::after {
    content    : '';
    flex       : 1;
    height     : 1px;
    background : var(--cv-border);
}

/* Icônes dans les labels de champs */
.medcv-field-icon {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 20px;
    height         : 20px;
    font-size      : .75rem;
    font-weight    : 700;
    border-radius  : 6px;
    flex-shrink    : 0;
    vertical-align : middle;
    background     : var(--cv-bg);
}
.medcv-field-icon svg {
    width  : 12px !important;
    height : 12px !important;
    /* Chaque icône porte déjà son propre fill/stroke (plein ou contour,
       cf. medcv_social_icon()) — on ne force plus rien ici, un forçage
       global de stroke:none rendait invisibles les icônes en contour
       (email, téléphone, site web...) qui n'ont pas de fill. */
}
.medcv-field-icon--email   { background:var(--cv-bg, #eef2ff); color: #6366f1 !important; }
.medcv-field-icon--linkedin { background: #dbeafe; color: #0077b5 !important; font-style: normal; }

/* Mêmes marques quasi noires que sur le rendu affiché (X/Twitter, TikTok,
   GitHub) : invisibles sur fond sombre, éclaircies uniquement en mode
   sombre — la couleur de marque officielle reste inchangée en clair. */
.medcv-theme-dark label[for="medcv-f-twitter"] .medcv-field-icon,
.medcv-theme-dark label[for="medcv-f-tiktok"]  .medcv-field-icon,
.medcv-theme-dark label[for="medcv-f-github"]  .medcv-field-icon {
    color: #e4e2f5 !important;
}

/* ── ATS contacts sur deux lignes ── */
/* ── Europass : liens cliquables dans la table ── */
.ep-table td a { color: var(--ep-accent) !important; text-decoration: none !important; }
.ep-table td a:hover { text-decoration: underline !important; }

/* ────────────────────────────────────────────────────────────
   17. FIX CANADIEN — pas d'images dans les publications
──────────────────────────────────────────────────────────── */
/* S'assurer que les liens texte ne génèrent pas d'images parasites */
.ca-link {
    display      : inline-block !important;
    font-size    : .74rem !important;
    color        : var(--cv-accent) !important;
    text-decoration: none !important;
    margin-top   : 3px !important;
    padding      : 2px 8px !important;
    border        : 1px solid rgba(26,108,245,.25) !important;
    border-radius : 4px !important;
    background   : rgba(26,108,245,.04) !important;
    transition   : all .15s !important;
}
.ca-link:hover { background: rgba(26,108,245,.1) !important; border-color: var(--cv-accent) !important; }

/* Masquer toute img parasite dans le corps des CV (hors avatars) */
.medcv-moderna .cv-moderna-body img:not(.cv-avatar),
.medcv-canadien img:not(.cv-avatar),
.medcv-ats img,
.medcv-europass .ep-body img:not(.ep-photo) {
    display: none !important;
}

/* ────────────────────────────────────────────────────────────
   18. LIENS "PRINT-SAFE" — affichage écran vs impression
   À l'écran : lien cliquable compact avec libellé.
   À l'impression : l'URL complète redevient un texte simple,
   car un lien cliquable n'a aucun sens sur papier/PDF.
──────────────────────────────────────────────────────────── */

/* ── Écran : afficher seulement le libellé, masquer l'URL brute ──
   (le style complet avec variantes cv-pub-link/ca-link est défini
   plus bas, juste avant le bloc @media print) ── */

/* URL brute affichée pour DOI/liens déjà en clair (ATS, Europass) */
.medcv-ats-url {
    font-size     : .73rem !important;
    color         : var(--cv-muted) !important;
    word-break    : break-all;
    font-style    : normal !important;
}

/* ── Liens cliquables avec libellé court à l'écran (Vérifier, Lire, Consulter…)
   L'URL ne s'affiche jamais sur la plateforme — uniquement à l'impression
   via la règle .medcv-plink-url dans le bloc @media print plus bas. ── */
.medcv-plink {
    display        : inline-flex !important;
    align-items    : center !important;
    gap            : 4px !important;
    font-size      : .72rem !important;
    font-weight    : 600 !important;
    color          : var(--cv-accent) !important;
    text-decoration: none !important;
}
.medcv-plink:hover { text-decoration: underline !important; }
.medcv-plink-label::after { content: ' ↗'; }
/* Pas de flèche décorative dans le contexte ATS — sobriété requise */
.ats-entry .medcv-plink-label::after { content: ''; }
.medcv-plink-url   { display: none !important; } /* masquée à l'écran, révélée à l'impression */

/* Variante : lien de vérification de certification */
.medcv-plink:not(.cv-pub-link):not(.ca-link) {
    margin-top : 2px;
}

/* Variante publication colonne gauche Modern */
.medcv-plink.cv-pub-link { font-size: .7rem !important; margin-top: 3px; }

/* Variante canadien — bouton discret */
.medcv-plink.ca-link {
    margin-top    : 4px !important;
    padding       : 2px 9px !important;
    border        : 1px solid rgba(26,108,245,.25) !important;
    border-radius : 5px !important;
    background    : rgba(26,108,245,.05) !important;
}
.medcv-plink.ca-link:hover { background: rgba(26,108,245,.1) !important; text-decoration: none !important; }

/* ── Impression : remplacer le lien cliquable par texte + URL visible ── */
@media print {
    /* Les liens de type "Vérifier ↗ / Lire ↗ / Consulter ↗" deviennent du texte simple
       avec l'URL complète visible juste après, car cliquer est impossible sur papier.
       Spécificité renforcée (a.medcv-plink) pour neutraliser .cv-pub-link / .ca-link
       qui imposent sinon une couleur bleue accent peu lisible sur papier. */
    a.medcv-plink {
        color           : #1a1a1a !important;
        text-decoration : none !important;
        display         : block !important;
        gap             : 0 !important;
        background      : none !important;
        border          : none !important;
        padding         : 0 !important;
    }
    .medcv-plink-label { display: none !important; }
    html body .medcv-plink-url,
    .medcv-render .medcv-plink-url,
    a.medcv-plink .medcv-plink-url {
        display    : inline !important;
        font-size  : .72rem !important;
        color      : #000000 !important;
        font-weight: 700 !important;
        word-break : break-all;
        -webkit-text-fill-color: #000000 !important;
    }

    /* Réseaux sociaux (LinkedIn, Facebook, Instagram, X, YouTube, TikTok,
       GitHub, Behance, Dribbble, site web) : sur papier, un libellé comme
       "Instagram" n'est pas cliquable et n'apporte rien — on masque ce
       libellé générique et on affiche l'URL complète à la place.
       Email / téléphone / WhatsApp / localisation restent inchangés car
       leur libellé EST déjà l'info utile (l'adresse, le numéro). */
    .cv-contact-item--social span:last-child,
    .cv-social-item--social .cv-social-label,
    .ca-contact-item--social span:last-child {
        display: none !important;
    }
    /* Ces URLs apparaissent dans l'en-tête du style Modern, désormais sur
       fond clair (la structure a changé, ce n'était plus vrai depuis
       le passage à la carte de verre à colonne unique) — texte foncé
       lisible, comme les deux autres cas ci-dessous. */
    .cv-contact-item--social[href]::after {
        content     : attr(href);
        font-size   : .66rem;
        color       : #333333 !important;
        font-weight : 500;
        word-break  : break-all;
        margin-left : 3px;
        opacity     : .92;
    }
    /* Grille sociale en pied de page (fond clair) : couleur foncée lisible */
    .cv-social-item--social[href]::after {
        content     : attr(href);
        font-size   : .66rem;
        color       : #333333 !important;
        font-weight : 400;
        word-break  : break-all;
        margin-left : 3px;
    }
    /* Le style Canadien affiche ses contacts sur fond BLANC (pas sombre) :
       garder une couleur foncée lisible sur papier clair. */
    .ca-contact-item--social[href]::after {
        content     : attr(href);
        font-size   : .66rem;
        color       : #333333 !important;
        font-weight : 400;
        word-break  : break-all;
        margin-left : 3px;
    }

    /* ── ATS : réseaux sociaux affichés en URL à l'impression ──
       Les contacts tagués .ats-contact--social masquent le nom
       (LinkedIn, Facebook…) et affichent l'URL complète à la place.
       Les contacts directs (email, tél, localisation) restent inchangés.
       IMPORTANT : .ats-contacts est en display:flex à l'écran, ce qui
       annule le display:block des enfants (un flex-item garde son
       comportement de ligne). On force donc le conteneur lui-même en
       block à l'impression pour permettre un vrai empilement vertical
       propre des URLs, avec un espacement net entre chaque entrée. */
    .ats-contacts {
        display    : block !important;
        text-align : center !important;
    }
    .ats-contact-cell {
        display      : inline !important;
        border-right : 1px solid #bbb !important;
        padding      : 0 8px !important;
    }
    .ats-contact-cell:last-child { border-right: none !important; }

    .ats-contact-cell.ats-contact--social {
        display      : block !important;
        border-right : none !important;
        padding      : 2px 0 !important;
        margin       : 2px 0 !important;
        text-align   : center !important;
    }
    .ats-contact-a.ats-contact--social {
        color           : #1a1a1a !important;
        text-decoration : none !important;
        font-style      : normal !important;
        font-size       : .71rem !important;
        display         : block !important;
        line-height     : 1.5 !important;
    }
    /* Cacher le nom générique (LinkedIn, Instagram…) et afficher l'URL */
    .ats-contact-a.ats-contact--social::before {
        content      : attr(href);
        display      : block !important;
        color        : #000 !important;
        font-weight  : 600 !important;
        word-break   : break-all;
        font-style   : normal !important;
    }
    .ats-contact-a.ats-contact--social > * {
        display : none !important;
    }
    /* Pour les liens ATS directs (email, tel…) : affichage normal en ligne */
    .ats-contact-a:not(.ats-contact--social) {
        color           : #333 !important;
        text-decoration : none !important;
    }

    /* Les liens restent visuellement neutres (pas de couleur bleue de lien actif) */
    .medcv-bb-section a {
        color           : inherit !important;
        text-decoration : none !important;
    }

    /* Les icônes SVG des réseaux sociaux restent visibles en couleur à l'impression */
    .cv-contact-item svg, .cv-social-icon svg, .ca-contact-icon svg {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ============================================================
   POPUP CARTE (localisation) — modal de localisation, pour une
   expérience visuelle identique quel que soit le point d'entrée
   (adresse cliquable dans le CV).
   ============================================================ */
.medlocb-overlay{
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease;
    box-sizing: border-box;
}
.medlocb-overlay.is-open{
    opacity: 1;
    visibility: visible;
}
.medlocb-modal{
    position: relative;
    width: min(880px, 100%);
    height: min(620px, 85vh);
    background:#fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(.94) translateY(8px);
    transition: transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.medlocb-overlay.is-open .medlocb-modal{
    transform: scale(1) translateY(0);
}
.medlocb-modal__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom:1px solid #eef0f3;
    background:#fff;
    flex: 0 0 auto;
}
.medlocb-modal__title{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color:#0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.medlocb-modal__title svg{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: #1a6cf5;
    stroke-width: 2;
}
.medlocb-modal__actions{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.medlocb-modal__link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #1a6cf5;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s ease;
    white-space: nowrap;
}
.medlocb-modal__link:hover{
    background:#eef4ff;
    color: #1a6cf5;
    text-decoration: none;
}
.medlocb-modal__close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background:#f1f3f5;
    color: #475569;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    flex-shrink: 0;
    padding: 0;
}
.medlocb-modal__close:hover{
    background:#fee2e2;
    color: #dc2626;
    transform: rotate(90deg);
}
.medlocb-modal__close svg{
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}
.medlocb-modal__body{
    position: relative;
    flex: 1 1 auto;
    background:#f5f6f8;
}
.medlocb-modal__body iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.medlocb-modal__loading{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #64748b;
    font-size: 13px;
    background:#f5f6f8;
    transition: opacity .2s ease;
}
.medlocb-modal__spinner{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border:3px solid #dbe2ea;
    border-top-color: #1a6cf5;
    animation: medlocb-spin .8s linear infinite;
}
@keyframes medlocb-spin{ to{ transform: rotate(360deg); } }
.medlocb-modal__loading.is-hidden{
    opacity: 0;
    pointer-events: none;
}
.medlocb-modal__fallback{
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 32px;
    color: #475569;
    background:#f5f6f8;
    box-sizing: border-box;
}
.medlocb-modal__fallback.is-visible{
    display: flex;
}
.medlocb-modal__fallback svg{
    stroke: #94a3b8;
}
.medlocb-modal__fallback p{
    margin: 0;
    font-size: 14px;
    max-width: 320px;
}
.medlocb-modal__fallback-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    background: #1a6cf5;
    color:#fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.medlocb-modal__fallback-btn:hover{
    background: #135ad1;
    color:#fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Mode sombre de la popup carte — classe posée en JS à l'ouverture,
   synchronisée sur l'état de la carte CV (voir medcv.js, openModal). */
.medlocb-overlay.medcv-theme-dark .medlocb-modal          { background: #14121f; }
.medlocb-overlay.medcv-theme-dark .medlocb-modal__header  { background: #14121f; border-bottom-color: rgba(255,255,255,.1); }
.medlocb-overlay.medcv-theme-dark .medlocb-modal__title   { color: #e8e6f5; }
.medlocb-overlay.medcv-theme-dark .medlocb-modal__link:hover { background: rgba(255,255,255,.06); }
.medlocb-overlay.medcv-theme-dark .medlocb-modal__close   { background: rgba(255,255,255,.08); color: #d6d3ea; }
.medlocb-overlay.medcv-theme-dark .medlocb-modal__close:hover { background: rgba(220,38,38,.22); color: #fca5a5; }
.medlocb-overlay.medcv-theme-dark .medlocb-modal__body,
.medlocb-overlay.medcv-theme-dark .medlocb-modal__loading,
.medlocb-overlay.medcv-theme-dark .medlocb-modal__fallback { background: #1a1830; color: #a6a2c4; }
.medlocb-overlay.medcv-theme-dark .medlocb-modal__spinner  { border-color: rgba(255,255,255,.14); }
@media (max-width: 640px){
    .medlocb-overlay{ padding: 0; }
    .medlocb-modal{
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .medlocb-modal__link span{ display: none; }
}
/* ═══════════════════════════════════════════════════════════════
   MEDCV — JOB SEEKING : badge · profile card · edit form · filter
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS custom properties ── */
:root {
    --medcv-green  : #16a34a;
    --medcv-green-l: #dcfce7;
    --medcv-green-b: #86efac;
    --medcv-blue   : #1d4ed8;
    --medcv-blue-l : #eff6ff;
    --medcv-blue-b : #bfdbfe;
    --medcv-purple : #7e22ce;
    --medcv-purple-l: #fdf4ff;
    --medcv-gray   : #374151;
    --medcv-gray-l : #f9fafb;
    --medcv-border : #e5e7eb;
    --medcv-radius : 10px;
}

/* ════════════════════════════════════════
   1. OPEN TO WORK BANNER (profile view)
   ════════════════════════════════════════ */

.medcv-otw-banner {
    background      : linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-bottom   : 1.5px solid var(--medcv-green-b);
    padding         : 16px 24px;
    display         : flex;
    align-items     : flex-start;
    gap             : 20px;
    flex-wrap       : wrap;
}

.medcv-otw-badge {
    display         : inline-flex;
    align-items     : center;
    gap             : 7px;
    padding         : 6px 14px 6px 10px;
    background      : #fff;
    border          : 1.5px solid var(--medcv-green);
    border-radius   : 20px;
    font-size       : .8rem;
    font-weight     : 700;
    color           : var(--medcv-green);
    white-space     : nowrap;
    box-shadow      : 0 1px 4px rgba(22,163,74,.12);
}

.medcv-otw-badge::before {
    content         : '';
    display         : inline-block;
    width           : 8px;
    height          : 8px;
    background      : var(--medcv-green);
    border-radius   : 50%;
    flex-shrink     : 0;
    animation       : medcv-pulse 1.8s ease-in-out infinite;
}

@keyframes medcv-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.4; transform:scale(1.4); }
}

.medcv-job-card {
    flex            : 1;
    min-width       : 0;
    display         : flex;
    flex-wrap       : wrap;
    gap             : 14px 24px;
    padding         : 0;
    background      : transparent;
    border          : none;
}

.medcv-job-item {
    display         : flex;
    flex-direction  : column;
    gap             : 3px;
    min-width       : 120px;
}

.medcv-job-item__label {
    font-size       : .65rem;
    font-weight     : 700;
    text-transform  : uppercase;
    letter-spacing  : .08em;
    color           : #6b7280;
}

.medcv-job-item__value {
    font-size       : .83rem;
    color           : #111827;
    font-weight     : 500;
    line-height     : 1.4;
}

.medcv-job-tags {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 4px;
    margin-top      : 2px;
}

.medcv-job-tag {
    display         : inline-block;
    padding         : 2px 9px;
    border-radius   : 4px;
    font-size       : .73rem;
    font-weight     : 600;
    background      : var(--medcv-blue-l);
    color           : var(--medcv-blue);
    border          : 1px solid var(--medcv-blue-b);
}

.medcv-job-tag--mode  { background: var(--medcv-purple-l); color: var(--medcv-purple); border-color: #e9d5ff; }
.medcv-job-tag--avail { background: var(--medcv-green-l);  color: var(--medcv-green);  border-color: var(--medcv-green-b); }

@media print {
    .medcv-otw-badge,
    .medcv-otw-banner,
    .medcv-job-card,
    .medcv-recruiter-filter { display: none !important; }
}

/* ════════════════════════════════════════
   2. JOB SEEKING EDIT FORM SECTION
   ════════════════════════════════════════ */

.medcv-job-section {
    margin-top      : 24px;
    border-radius   : var(--medcv-radius);
    overflow        : hidden;
    border          : 1.5px solid var(--medcv-border);
    background      : #fff;
}

.medcv-job-section__head {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 14px 20px;
    background      : var(--medcv-gray-l);
    border-bottom   : 1.5px solid var(--medcv-border);
}

.medcv-job-section__icon {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 34px;
    height          : 34px;
    border-radius   : 8px;
    background      : linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    font-size       : 16px;
    flex-shrink     : 0;
}

.medcv-job-section__title {
    font-size       : .92rem;
    font-weight     : 700;
    color           : #111827;
    flex            : 1;
}

.medcv-job-section__sub {
    font-size       : .72rem;
    color           : #9ca3af;
    font-weight     : 400;
    background      : #f3f4f6;
    border          : 1px solid #e5e7eb;
    border-radius   : 4px;
    padding         : 2px 8px;
}

.medcv-job-section__body {
    padding         : 20px;
    display         : flex;
    flex-direction  : column;
    gap             : 18px;
}

/* Open to Work toggle */
.medcv-job-open-toggle {
    display         : flex;
    align-items     : center;
    gap             : 12px;
    padding         : 14px 16px;
    background      : var(--medcv-green-l);
    border          : 1.5px solid var(--medcv-green-b);
    border-radius   : 8px;
    cursor          : pointer;
    transition      : background .15s, border-color .15s;
}

.medcv-job-open-toggle:has(input:checked) {
    background      : #bbf7d0;
    border-color    : var(--medcv-green);
}

.medcv-otw-switch {
    position        : relative;
    width           : 40px;
    height          : 22px;
    flex-shrink     : 0;
}

.medcv-otw-switch input { display: none; }

.medcv-otw-slider {
    position        : absolute;
    inset           : 0;
    background      : #d1d5db;
    border-radius   : 11px;
    cursor          : pointer;
    transition      : background .2s;
}

.medcv-otw-slider::after {
    content         : '';
    position        : absolute;
    top             : 3px;
    left            : 3px;
    width           : 16px;
    height          : 16px;
    border-radius   : 50%;
    background      : #fff;
    box-shadow      : 0 1px 3px rgba(0,0,0,.2);
    transition      : transform .2s;
}

.medcv-otw-switch input:checked ~ .medcv-otw-slider { background: var(--medcv-green); }
.medcv-otw-switch input:checked ~ .medcv-otw-slider::after { transform: translateX(18px); }

.medcv-job-open-toggle label {
    font-size       : .9rem;
    font-weight     : 600;
    color           : #15803d;
    cursor          : pointer;
    user-select     : none;
}

/* Field groups */
.medcv-job-group {
    display         : flex;
    flex-direction  : column;
    gap             : 6px;
}

.medcv-job-group__label {
    font-size       : .72rem;
    font-weight     : 700;
    text-transform  : uppercase;
    letter-spacing  : .07em;
    color           : #6b7280;
}

/* Pill checkboxes (contract + mode) */
.medcv-job-pills {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 6px;
}

.medcv-job-pills label {
    display         : inline-flex;
    align-items     : center;
    gap             : 5px;
    padding         : 5px 12px;
    border          : 1.5px solid var(--medcv-border);
    border-radius   : 20px;
    font-size       : .8rem;
    color           : #4b5563;
    cursor          : pointer;
    transition      : all .15s;
    background      : #fff;
    user-select     : none;
}

.medcv-job-pills label input { display: none; }

.medcv-job-pills label:hover {
    border-color    : #93c5fd;
    background      : var(--medcv-blue-l);
    color           : var(--medcv-blue);
}

.medcv-job-pills label:has(input:checked) {
    background      : var(--medcv-blue-l);
    border-color    : var(--medcv-blue);
    color           : var(--medcv-blue);
    font-weight     : 600;
}

.medcv-job-pills label:has(input:checked)::before {
    content         : '✓ ';
    font-size       : .7rem;
}

/* Mode pills — purple tint */
.medcv-job-pills--mode label:has(input:checked) {
    background      : var(--medcv-purple-l);
    border-color    : #a855f7;
    color           : var(--medcv-purple);
}

/* 2-col grid for text fields */
.medcv-job-grid {
    display         : grid;
    grid-template-columns: 1fr 1fr;
    gap             : 14px;
}

@media (max-width: 640px) {
    .medcv-job-grid { grid-template-columns: 1fr; }
}

.medcv-job-field {
    display         : flex;
    flex-direction  : column;
    gap             : 5px;
}

.medcv-job-field label {
    font-size       : .72rem;
    font-weight     : 700;
    text-transform  : uppercase;
    letter-spacing  : .07em;
    color           : #6b7280;
}

.medcv-job-field input[type="text"],
.medcv-job-field input[type="date"],
.medcv-job-field input[type="number"],
.medcv-job-field select {
    padding         : 9px 12px;
    border          : 1.5px solid #d1d5db;
    border-radius   : 7px;
    font-size       : .85rem;
    font-family     : inherit;
    background      : #fff;
    color           : #111827;
    width           : 100%;
    box-sizing      : border-box;
    transition      : border-color .15s, box-shadow .15s;
}

.medcv-job-field input:focus,
.medcv-job-field select:focus {
    border-color    : #3b82f6;
    outline         : none;
    box-shadow      : 0 0 0 3px color-mix(in srgb, var(--medcv-blue-2) 12%, transparent);
}

/* Salary row */
.medcv-job-salary-row {
    display         : grid;
    grid-template-columns: 1fr 1fr 100px;
    gap             : 10px;
    align-items     : end;
}

@media (max-width: 640px) {
    .medcv-job-salary-row { grid-template-columns: 1fr 1fr; }
}

/* Checkbox row (relocation + salary visible) */
.medcv-job-check-row {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    font-size       : .83rem;
    color           : #4b5563;
}

.medcv-job-check-row input[type="checkbox"] {
    width           : 16px;
    height          : 16px;
    accent-color    : var(--medcv-blue);
    cursor          : pointer;
    flex-shrink     : 0;
}

/* Visibility select — full width */
.medcv-job-field--full { grid-column: 1 / -1; }

/* ════════════════════════════════════════
   3. RECRUITER FILTER (member directory)
   Design "glass" moderne — gris / blanc / noir, sans bleu.
   Transparence légère + flou d'arrière-plan + ombres douces +
   micro-interactions (lift au survol, ressort au clic).
   !important sur couleurs/fonds/bordures : reste prioritaire sur
   tout CSS de thème chargé après medcv.css.
   ════════════════════════════════════════ */

.medcv-recruiter-filter {
    --medcv-ease       : cubic-bezier(.4, 0, .2, 1);
    /* Couleur de marque du site (ReadyLaunch, puis thème BuddyBoss classique,
       puis notre bleu par défaut si aucune des deux n'est disponible) —
       demande explicite : ne pas imposer notre bleu si le site a sa propre
       couleur. Le dégradé (blue-2/blue-3) est calculé automatiquement à
       partir de cette couleur avec color-mix(), donc reste cohérent quelle
       que soit la couleur de marque réelle. */
    --medcv-blue       : var(--bb-rl-primary-color, var(--bb-primary-color, #2563eb));
    --medcv-blue-2     : color-mix(in srgb, var(--medcv-blue) 78%, white);
    --medcv-blue-3     : color-mix(in srgb, var(--medcv-blue) 55%, white);
    --medcv-red        : #dc2626;
    --medcv-red-2      : #ef4444;
    --medcv-blue-wash  : linear-gradient(135deg, color-mix(in srgb, var(--medcv-blue) 8%, transparent) 0%, color-mix(in srgb, var(--medcv-blue-3) 8%, transparent) 100%);
    /* Alias vers les noms de variables qu'utilise .medcv-theme-toggle
       (partagé avec la carte CV, qui les définit dans son propre contexte
       --cv-*) : ce panneau vit sur une autre page, sans ces variables au-
       dessus de lui, donc on les redéfinit ici avec des valeurs sensées
       pour ce contexte plutôt que de dupliquer le CSS du toggle. */
    --cv-white         : var(--bb-content-background-color, #fff);
    --cv-border        : var(--bb-content-border-color, #dcdfe3);
    --cv-muted         : #8a8f98;
    --cv-accent        : var(--medcv-blue);
    --cv-accent-text   : #fff;
    margin             : 0 0 22px !important;
    border-radius      : 10px !important;
    overflow           : hidden;
    border             : 1px solid var(--bb-content-border-color, #dcdfe3) !important;
    background         : rgba(255, 255, 255, .97) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter    : blur(28px) saturate(160%);
    box-shadow         : none;
    transition         : box-shadow .25s var(--medcv-ease), background .3s ease, border-color .3s ease;
}

/* Barre du haut : bouton d'ouverture du panneau + bascule clair/sombre
   côte à côte. Le bouton d'ouverture occupait toute la largeur avant
   (width:100%) ; il partage maintenant l'espace avec le sélecteur de
   thème via flex, sans changer son padding/apparence interne. */
.medcv-rf-topbar {
    display     : flex;
    align-items : center;
    gap         : 8px;
    padding-right: 14px;
}
.medcv-rf-topbar .medcv-theme-toggle { flex-shrink: 0; }

/* Toggle — volontairement plat : aucun fond, aucune bordure, aucune ombre,
   ni au repos ni au survol. Seule la couleur de l'icône/flèche change
   légèrement pour indiquer l'interactivité, sans "effet de boîte". */
.medcv-recruiter-toggle {
    flex            : 1 1 auto !important;
    min-width       : 0 !important;
    width           : auto !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : flex-start !important;
    gap             : 13px;
    padding         : 14px 18px 14px 8px !important;
    background      : transparent !important;
    border          : none !important;
    cursor          : pointer;
    font-size       : .84rem !important;
    font-weight     : 600;
    letter-spacing  : -.005em;
    color           : var(--bb-headings-color, #1e2132) !important;
    text-align      : left !important;
    outline         : none !important;
    box-shadow      : none !important;
}
/* Ceinture et bretelles : si "display: flex" ci-dessus perdait quand même
   face à une règle du thème BuddyBoss (page annuaire des membres, hors du
   contexte .medcv-bb-section où vit la carte CV — aucun des correctifs
   anti-BuddyBoss du haut de ce fichier ne s'y applique), le style natif
   d'un <button> centre son contenu par défaut : ces deux lignes
   garantissent que l'icône et le texte restent collés à gauche même dans
   ce cas. */
.medcv-recruiter-toggle-label,
.medcv-recruiter-icon { text-align: left !important; }

/* Au clic à la souris, aucun anneau de focus (c'était le fond gris qui
   apparaissait à l'ouverture/fermeture). Au clavier (tab), un anneau fin
   et bleu reste visible pour l'accessibilité. */
.medcv-recruiter-toggle:focus-visible {
    outline         : 2px solid var(--medcv-blue, #2563eb) !important;
    outline-offset  : -2px;
}

.medcv-recruiter-icon {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 17px;
    height          : 17px;
    margin-right    : 1px;
    color           : #8a8f98 !important;
    flex-shrink     : 0;
    transition      : color .2s var(--medcv-ease);
}
.medcv-recruiter-icon svg { width: 100%; height: 100%; }
.medcv-recruiter-toggle:hover .medcv-recruiter-icon { color: var(--medcv-blue) !important; }

.medcv-recruiter-toggle-label { line-height: 1.2; margin-right: 2px; }

.medcv-recruiter-arrow {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 15px;
    height          : 15px;
    margin-left     : auto;
    padding-left    : 4px;
    color           : #a3a8b0 !important;
    transition      : transform .3s var(--medcv-ease), color .2s var(--medcv-ease);
}
.medcv-recruiter-arrow svg { width: 100%; height: 100%; }

.medcv-recruiter-toggle:hover .medcv-recruiter-arrow { color: var(--medcv-blue) !important; }

.medcv-recruiter-toggle[aria-expanded="true"] .medcv-recruiter-arrow {
    transform       : rotate(180deg);
    color           : #1e2132 !important;
}
.medcv-recruiter-toggle[aria-expanded="true"]:hover .medcv-recruiter-arrow { color: var(--medcv-blue) !important; }

/* Count badge — pastille bleu glassy, petit "pop" à l'apparition */
.medcv-rf-count {
    align-items     : center;
    justify-content : center;
    min-width       : 19px;
    height          : 19px;
    margin-left     : 1px;
    padding         : 0 6px;
    border-radius   : 999px;
    font-size       : .68rem;
    font-weight     : 700;
    background      : linear-gradient(135deg, color-mix(in srgb, var(--medcv-blue) 95%, transparent), color-mix(in srgb, var(--medcv-blue-2) 95%, transparent)) !important;
    color           : #fff !important;
    box-shadow      : inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px color-mix(in srgb, var(--medcv-blue) 35%, transparent);
    display         : none;
    transform       : scale(.85);
    transition      : transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.medcv-rf-count.visible { display: inline-flex; transform: scale(1); }

/* ── Panel : ouverture/fermeture en CSS pur, sans aucune mesure JS ──
   Technique "grid-template-rows: 0fr → 1fr" : le wrapper externe est une
   grille à une ligne dont la piste anime de 0fr à 1fr (la taille de
   contenu réelle, quelle qu'elle soit). Comme 1fr correspond toujours au
   contenu actuel, ça s'adapte automatiquement à tout changement de
   hauteur (sélection d'un filtre, retour à la ligne, redimensionnement…)
   sans jamais avoir besoin de recalculer quoi que ce soit en JS — donc
   plus aucun risque de contenu coupé. */
.medcv-recruiter-panel {
    display         : grid;
    grid-template-rows: 0fr;
    opacity         : 0;
    transition      : grid-template-rows .4s var(--medcv-ease), opacity .3s var(--medcv-ease);
}

.medcv-recruiter-panel.is-open {
    grid-template-rows: 1fr;
    opacity         : 1;
}

.medcv-recruiter-panel[hidden] { display: none; }

.medcv-recruiter-panel-inner {
    overflow        : hidden;
    min-height      : 0;
    background      : rgba(250, 250, 251, .6) !important;
    border-top      : 1px solid rgba(17,24,39,.06) !important;
    display         : grid;
    grid-template-columns: repeat(3, 1fr);
    gap             : 20px 22px;
    padding         : 20px;
}

@media (max-width: 900px) {
    .medcv-recruiter-panel-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .medcv-recruiter-panel-inner { grid-template-columns: 1fr; }
}

/* Filter group */
.medcv-rf-group {
    display         : flex;
    flex-direction  : column;
    gap             : 9px;
}

.medcv-rf-group__label {
    font-size       : .64rem;
    font-weight     : 700;
    text-transform  : uppercase;
    letter-spacing  : .085em;
    color           : #9b9c9f !important;
    padding-bottom  : 6px;
    border-bottom   : 1px solid rgba(17,24,39,.07) !important;
}

/* Pill checkboxes — chips arrondis, style "capsule" (forme volontairement
   pleine ronde, indépendante du réglage général des rayons ci-dessous) */
.medcv-rf-pills {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 6px;
}

.medcv-rf-pills label {
    display         : inline-flex;
    align-items     : center;
    gap             : 5px;
    padding         : 5.5px 12px;
    border          : 1px solid var(--bb-content-border-color, #dcdfe3) !important;
    border-radius   : 8px;
    font-size       : .76rem;
    color           : #5a5a5a !important;
    cursor          : pointer;
    background      : rgba(255,255,255,.9) !important;
    user-select     : none;
    transition      : transform .18s var(--medcv-ease), background .18s var(--medcv-ease),
                      border-color .18s var(--medcv-ease), color .18s var(--medcv-ease),
                      box-shadow .18s var(--medcv-ease);
}

.medcv-rf-pills label input { display: none; }

.medcv-rf-pills label:hover {
    border-color    : var(--medcv-blue-2) !important;
    color           : var(--medcv-blue) !important;
    background      : var(--medcv-blue-wash) !important;
    transform       : translateY(-1px);
    box-shadow      : 0 4px 12px color-mix(in srgb, var(--medcv-blue) 16%, transparent);
}

.medcv-rf-pills label:has(input:checked) {
    background      : linear-gradient(135deg, color-mix(in srgb, var(--medcv-blue) 94%, transparent), color-mix(in srgb, var(--medcv-blue-2) 94%, transparent)) !important;
    border-color    : color-mix(in srgb, var(--medcv-blue) 60%, transparent) !important;
    color           : #fff !important;
    font-weight     : 600;
    box-shadow      : inset 0 1px 0 rgba(255,255,255,.25), 0 3px 12px color-mix(in srgb, var(--medcv-blue) 35%, transparent);
}

.medcv-rf-pills label:has(input:checked):hover { transform: translateY(-1px); }

.medcv-rf-pills label:active { transform: translateY(0) scale(.97); }

/* Open to work toggle — reste vert quand coché (indicateur de statut) ;
   survol non coché en camaïeu bleu comme le reste des champs. */
.medcv-rf-otw {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 10px 14px;
    background      : rgba(255,255,255,.9) !important;
    border          : 1px solid var(--bb-content-border-color, #dcdfe3) !important;
    border-radius   : 8px;
    cursor          : pointer;
    transition      : border-color .2s var(--medcv-ease), background .2s var(--medcv-ease), transform .18s var(--medcv-ease);
}

.medcv-rf-otw:hover {
    transform       : translateY(-1px);
    border-color    : color-mix(in srgb, var(--medcv-blue) 35%, transparent) !important;
    background      : var(--medcv-blue-wash) !important;
}

.medcv-rf-otw:has(input:checked) {
    background      : rgba(20,181,80,.08) !important;
    border-color    : var(--bb-success-color, #14b550) !important;
}

.medcv-rf-otw input[type="checkbox"] {
    -webkit-appearance: none;
    appearance      : none;
    width           : 18px;
    height          : 18px;
    margin          : 0;
    flex-shrink     : 0;
    border          : 1.5px solid var(--bb-content-border-color, #dcdfe3) !important;
    border-radius   : 5px;
    background      : #fff !important;
    cursor          : pointer;
    position        : relative;
    transition      : background .2s var(--medcv-ease), border-color .2s var(--medcv-ease);
}
/* Coche dessinée en CSS (pas le rendu natif du navigateur/thème, qui
   affichait une coche noire peu lisible sur fond vert) : garantit une
   coche blanche quel que soit le navigateur ou le thème BuddyBoss actif. */
.medcv-rf-otw input[type="checkbox"]:checked {
    background      : var(--bb-success-color, #14b550) !important;
    border-color    : var(--bb-success-color, #14b550) !important;
}
.medcv-rf-otw input[type="checkbox"]:checked::after {
    content         : '';
    position        : absolute;
    left            : 5px;
    top             : 1px;
    width           : 5px;
    height          : 9px;
    border          : solid #fff;
    border-width    : 0 2px 2px 0;
    transform       : rotate(45deg);
}

.medcv-rf-otw span {
    font-size       : .82rem;
    font-weight     : 600;
    color           : var(--bb-headings-color, #1e2132) !important;
}

.medcv-rf-otw:has(input:checked) span { color: var(--bb-success-color, #14b550) !important; }

/* Text inputs */
.medcv-rf-text {
    padding         : 9px 13px;
    border          : 1px solid var(--bb-content-border-color, #dcdfe3) !important;
    border-radius   : 8px;
    font-size       : .83rem;
    font-family     : inherit;
    width           : 100%;
    box-sizing      : border-box;
    background      : rgba(255,255,255,.9) !important;
    color           : var(--bb-headings-color, #1e2132) !important;
    transition      : border-color .2s var(--medcv-ease), box-shadow .2s var(--medcv-ease), background .2s var(--medcv-ease);
}

.medcv-rf-text::placeholder { color: #b0b3b9; }

.medcv-rf-text:hover { border-color: color-mix(in srgb, var(--medcv-blue) 30%, transparent) !important; }

.medcv-rf-text:focus {
    border-color    : var(--medcv-blue-2) !important;
    outline         : none;
    background      : #fff !important;
    box-shadow      : 0 0 0 4px color-mix(in srgb, var(--medcv-blue) 13%, transparent), 0 2px 10px color-mix(in srgb, var(--medcv-blue) 8%, transparent) !important;
}

/* Actions */
.medcv-rf-actions {
    grid-column     : 1 / -1;
    display         : flex;
    gap             : 10px;
    align-items     : center;
    padding-top     : 6px;
    border-top      : 1px solid rgba(17,24,39,.07) !important;
}

/* Apply filters — même famille que Reset (bouton fantôme) mais avec un
   fond teinté (pas blanc) pour bien le distinguer des étiquettes
   Contract type/Work mode : celles-ci restent blanches au repos, ce
   bouton est teinté bleu semi-transparent dès le repos, et devient
   nettement plus sombre au survol (texte basculé en blanc pour rester
   lisible sur un fond alors saturé). */
.medcv-rf-btn-apply {
    position        : relative;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 9px 22px;
    background      : transparent !important;
    color           : var(--medcv-blue) !important;
    border          : 1.5px solid var(--medcv-blue) !important;
    border-radius   : 8px;
    font-size       : .84rem;
    font-weight     : 600;
    letter-spacing  : -.005em;
    cursor          : pointer;
    box-shadow      : none;
    outline         : none !important;
    transition      : transform .18s var(--medcv-ease), box-shadow .22s var(--medcv-ease),
                      background .22s var(--medcv-ease), color .22s var(--medcv-ease),
                      border-color .22s var(--medcv-ease);
}

.medcv-rf-btn-apply:focus-visible {
    outline         : 2px solid var(--medcv-blue) !important;
    outline-offset  : 2px;
}

.medcv-rf-btn-apply:hover {
    transform       : translateY(-1px);
    background      : color-mix(in srgb, var(--medcv-blue) 82%, black) !important;
    color           : #fff !important;
    border-color    : color-mix(in srgb, var(--medcv-blue) 82%, black) !important;
}

.medcv-rf-btn-apply:active {
    transform       : translateY(0) scale(.97);
}

.medcv-rf-btn-apply:disabled {
    background      : rgba(255,255,255,.7) !important;
    color           : #b0b3b9 !important;
    border-color    : rgba(17,24,39,.15) !important;
    cursor          : default;
    transform       : none;
    box-shadow      : none;
}

/* Spinner (masqué par défaut, affiché via classe .is-loading côté JS) */
.medcv-rf-btn-spinner {
    display         : none;
    width           : 13px;
    height          : 13px;
    border          : 2px solid color-mix(in srgb, var(--medcv-blue) 30%, transparent);
    border-top-color: var(--medcv-blue);
    border-radius   : 50%;
    animation       : medcv-spin .6s linear infinite;
}

/* Au repos le spinner reste dans les tons bleus (fond clair) ; une fois le
   bouton survolé/chargé sur fond sombre, on le veut blanc pour rester
   visible — géré par une règle dédiée juste en dessous. */
.medcv-rf-btn-apply.is-loading .medcv-rf-btn-spinner {
    display         : inline-block;
}
.medcv-rf-btn-apply.is-loading:hover .medcv-rf-btn-spinner {
    border-color    : rgba(255,255,255,.35);
    border-top-color: #fff;
}
.medcv-rf-btn-apply.is-loading .medcv-rf-btn-label { opacity: .85; }

@keyframes medcv-spin { to { transform: rotate(360deg); } }

/* Reset — même logique que Apply, teinte rouge : fond semi-transparent au
   repos (jamais blanc), nettement plus sombre au survol avec texte blanc. */
.medcv-rf-btn-reset {
    position        : relative;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    padding         : 9px 18px;
    background      : transparent !important;
    color           : var(--medcv-red) !important;
    border          : 1.5px solid var(--medcv-red) !important;
    border-radius   : 8px;
    font-size       : .84rem;
    font-weight     : 600;
    letter-spacing  : -.005em;
    cursor          : pointer;
    box-shadow      : none;
    outline         : none !important;
    transition      : transform .18s var(--medcv-ease), box-shadow .22s var(--medcv-ease),
                      background .22s var(--medcv-ease), color .22s var(--medcv-ease),
                      border-color .22s var(--medcv-ease);
}

.medcv-rf-btn-reset:focus-visible {
    outline         : 2px solid var(--medcv-red) !important;
    outline-offset  : 2px;
}

.medcv-rf-btn-reset:hover {
    transform       : translateY(-1px);
    background      : color-mix(in srgb, var(--medcv-red) 82%, black) !important;
    color           : #fff !important;
    border-color    : color-mix(in srgb, var(--medcv-red) 82%, black) !important;
}

.medcv-rf-btn-reset:active {
    transform       : translateY(0) scale(.97);
}

.medcv-rf-active-hint {
    font-size       : .75rem;
    color           : #9b9c9f !important;
    margin-left     : auto;
    transition      : color .3s var(--medcv-ease);
}

.medcv-rf-active-hint.medcv-rf-pulse {
    color           : var(--medcv-blue) !important;
    animation       : medcv-hint-pulse .5s var(--medcv-ease);
}

@keyframes medcv-hint-pulse {
    0%   { opacity: 0; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Transition douce des cartes membres lors du filtrage ──
   Le JS bascule la classe .medcv-card-hidden / .medcv-card-enter ; le fade
   + léger décalage est géré ici en CSS pour un rendu "souple". */
#members-list > li[data-bp-item-id] {
    transition      : opacity .28s var(--medcv-ease), transform .28s var(--medcv-ease);
}

#members-list > li[data-bp-item-id].medcv-card-hidden {
    opacity         : 0 !important;
    transform       : scale(.97);
    pointer-events  : none;
}

#members-list > li[data-bp-item-id].medcv-card-enter {
    animation       : medcv-card-in .32s var(--medcv-ease) both;
}

@keyframes medcv-card-in {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .medcv-recruiter-panel,
    .medcv-rf-pills label,
    .medcv-rf-otw,
    .medcv-rf-btn-apply,
    .medcv-rf-btn-reset,
    #members-list > li[data-bp-item-id],
    #members-list > li[data-bp-item-id].medcv-card-enter {
        animation       : none !important;
        transition      : none !important;
        transform       : none !important;
    }
}

/* Mode sombre du panneau de filtre — déclenché par la détection réelle du
   fond de page (medcv.js, initThemeToggle), jamais uniquement par
   prefers-color-scheme : c'est cette dépendance qui causait le rendu gris
   illisible constaté précédemment (préférence système déconnectée du
   thème BuddyBoss réellement actif sur la page). La préférence explicite
   choisie via le sélecteur clair/sombre du panneau (localStorage, partagé
   avec la carte CV) prime quand elle existe ; sinon on retombe sur une
   mesure du fond réel de la page. */
.medcv-recruiter-filter.medcv-page-dark {
    border     : 1px solid rgba(255,255,255,.12) !important;
    background : rgba(24,22,40,.97) !important;
    --cv-white : rgba(255,255,255,.05);
    --cv-border: rgba(255,255,255,.14);
    --cv-muted : #8f8bb0;
}
.medcv-page-dark .medcv-recruiter-toggle { color: #ece9fb !important; }
.medcv-page-dark .medcv-recruiter-icon   { color: #a6a2c4 !important; }
.medcv-page-dark .medcv-recruiter-arrow  { color: #8f8bb0 !important; }
.medcv-page-dark .medcv-recruiter-toggle[aria-expanded="true"] .medcv-recruiter-arrow { color: #ece9fb !important; }

.medcv-page-dark .medcv-recruiter-panel-inner {
    background: rgba(255,255,255,.03) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}
.medcv-page-dark .medcv-rf-group__label { color: #8f8bb0 !important; border-bottom-color: rgba(255,255,255,.08) !important; }

.medcv-page-dark .medcv-rf-pills label,
.medcv-page-dark .medcv-rf-otw,
.medcv-page-dark .medcv-rf-text {
    background : rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.14) !important;
    color      : #ece9fb !important;
}
.medcv-page-dark .medcv-rf-text::placeholder { color: #8f8bb0; }
.medcv-page-dark .medcv-rf-text:focus { background: rgba(255,255,255,.08) !important; }
.medcv-page-dark .medcv-rf-otw span { color: #ece9fb !important; }

.medcv-page-dark .medcv-rf-actions { border-top-color: rgba(255,255,255,.08) !important; }

/* Le fond des boutons Apply/Reset est déjà semi-transparent (color-mix vers
   transparent) au repos : il s'adapte de lui-même au fond sombre sans
   override dédié ici — contrairement à avant, où leur fond était blanc et
   avait besoin d'un correctif spécifique pour le mode sombre. */
.medcv-page-dark .medcv-rf-btn-apply:disabled {
    background : rgba(255,255,255,.05) !important;
    color      : #6b6785 !important;
    border-color: rgba(255,255,255,.14) !important;
}
.medcv-page-dark .medcv-rf-active-hint { color: #8f8bb0 !important; }