/* ============================================================
   redesign.css — nouveau design itjob.tn
   Source : maquette « Itjob.tn job search design » (itjob.tn.dc.html)
   Palette : violet #766DF4 · encre #14213D · fond #EFF1F5
   Polices : Figtree (titres) · Mulish (UI) · JetBrains Mono (codes)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800;900&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Sans ceci, tout élément width:100% + padding + border déborde de son
   conteneur (ex: .rd-input dans .rd-auth-card en mobile). Portée aux
   éléments .rd-* uniquement pour ne rien changer sur les pages legacy
   (qui chargent déjà Bootstrap, lequel pose la même règle globalement). */
[class^="rd-"], [class*=" rd-"],
[class^="rd-"] *, [class*=" rd-"] * {
    box-sizing: border-box;
}

:root {
    --rd-font-display: 'Figtree', -apple-system, sans-serif;
    --rd-font-ui: 'Mulish', -apple-system, sans-serif;
    --rd-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --rd-primary: #766DF4;
    --rd-primary-dark: #5C52E0;
    --rd-ink: #14213D;
    --rd-body: #4E5A6E;
    --rd-muted: #5A6678;
    --rd-muted-2: #6B788C;
    --rd-placeholder: #8A96A8;

    --rd-page: #FFFFFF;
    --rd-card: #FFFFFF;
    --rd-soft: #F5F6F9;
    --rd-soft-2: #F1F2F7;
    --rd-hero: #F7F6FF;
    --rd-border: #E4E7EE;
    --rd-border-2: #DDE1EA;
    --rd-border-3: #D7DCE6;

    --rd-green: #1F8244;
    --rd-green-bg: #E8F6EC;
    --rd-pill: 999px;
}

body {
    background: var(--rd-page);
    font-family: var(--rd-font-ui);
    color: var(--rd-body);
}

/* ============ Boutons génériques ============ */
.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    height: 38px;
    padding: 0 20px;
    border-radius: 11px;
    border: 0;
    background: var(--rd-primary);
    color: #fff !important;
    font-family: var(--rd-font-ui);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
    transition: transform .12s, box-shadow .16s, background .14s;
}
.rd-btn:hover {
    background: var(--rd-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(118, 109, 244, .34);
    color: #fff;
}
.rd-btn--outline {
    background: #fff;
    border: 1px solid var(--rd-border-3);
    color: var(--rd-ink) !important;
}
.rd-btn--outline:hover {
    background: var(--rd-soft);
    box-shadow: none;
    color: var(--rd-ink);
}
.rd-btn--lg {
    height: 42px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 14px;
}

/* ============ Header ============ */
.rd-header {
    min-height: 74px;
    padding: 14px 48px;
    border-bottom: 1px solid var(--rd-border);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 50;
}
.rd-header-left {
    display: flex;
    align-items: center;
    gap: 40px;
    min-width: 0;
}
.rd-logo {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 30px;
    color: var(--rd-ink) !important;
    letter-spacing: -.03em;
    text-decoration: none !important;
    line-height: 1;
}
.rd-logo em {
    font-style: normal;
    color: var(--rd-primary);
}
.rd-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    font-family: var(--rd-font-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}
.rd-nav a {
    position: relative;
    padding: 4px 0;
    color: var(--rd-body);
    text-decoration: none;
    text-transform: none;
    transition: color .14s;
}
.rd-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--rd-primary);
    transition: right .18s ease;
}
.rd-nav a:hover,
.rd-nav a.is-active {
    color: var(--rd-ink);
    text-decoration: none;
}
.rd-nav a:hover::after,
.rd-nav a.is-active::after {
    right: 0;
}
.rd-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}
.rd-header-actions .rd-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-muted);
    white-space: nowrap;
    text-decoration: none;
}
.rd-header-actions .rd-link:hover {
    color: var(--rd-primary);
}
.rd-burger {
    display: none;
    cursor: pointer;
    width: 40px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--rd-border-3);
    background: #fff;
    color: var(--rd-ink);
    font-size: 17px;
    align-items: center;
    justify-content: center;
}
.rd-mobile-menu {
    display: none;
    width: 100%;
    padding: 12px 0 4px;
    border-top: 1px solid var(--rd-border);
    flex-direction: column;
    gap: 14px;
}
.rd-mobile-menu.is-open {
    display: flex;
}
.rd-mobile-menu a {
    font-family: var(--rd-font-ui);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rd-body);
    text-decoration: none;
}
.rd-mobile-menu a:hover { color: var(--rd-primary); }
.rd-mobile-menu .rd-btn {
    align-self: flex-start;
}

/* ============ Hero / recherche ============ */
.rd-hero {
    padding: 44px 48px 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--rd-hero);
    border-bottom: 1px solid var(--rd-border);
}
.rd-hero-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.rd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rd-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--rd-primary);
    text-transform: uppercase;
}
.rd-kicker::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--rd-primary);
    border-radius: 2px;
}
.rd-hero h1 {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--rd-ink);
    margin: 10px 0;
}
.rd-hero .rd-sub {
    font-size: 15px;
    color: var(--rd-muted-2);
}

.rd-search {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.rd-search-box {
    display: flex;
    align-items: center;
    gap: 13px;
    height: 60px;
    padding: 0 22px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--rd-border-2);
    box-shadow: 0 1px 2px rgba(20, 33, 61, .05);
}
.rd-search-box--kw {
    flex: 1;
    min-width: 0;
}
.rd-search-box--city {
    width: 270px;
    flex: none;
}
.rd-search-box svg {
    flex: none;
}
.rd-search-box .icon-kw {
    color: var(--rd-primary);
}
.rd-search-box .icon-city {
    color: var(--rd-muted);
}
.rd-search-box input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--rd-font-ui);
    font-size: 16px;
    color: var(--rd-ink);
}
.rd-search-box input::placeholder {
    color: var(--rd-placeholder);
}
.rd-search-btn {
    cursor: pointer;
    height: 60px;
    padding: 0 34px;
    border: 0;
    border-radius: 15px;
    background: var(--rd-primary);
    color: #fff;
    font-family: var(--rd-font-ui);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(118, 109, 244, .32);
    transition: transform .12s, box-shadow .16s, background .14s;
}
.rd-search-btn:hover {
    background: var(--rd-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(118, 109, 244, .4);
}
/* le selectpicker (bootstrap-select) injecté dans la boîte ville */
.rd-search-box--city .bootstrap-select {
    flex: 1;
    min-width: 0;
}
.rd-search-box--city .bootstrap-select > .dropdown-toggle,
.rd-search-box--city select {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: var(--rd-font-ui);
    font-size: 15px;
    color: var(--rd-muted);
    padding-left: 0;
    width: 100%;
    outline: none;
}

/* ============ Chips de filtres ============ */
.rd-chips {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rd-chip-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 14px;
    border-right: 1px solid var(--rd-border);
    flex-wrap: wrap;
}
.rd-chip-group:last-child {
    border-right: 0;
}
.rd-chip-label {
    font-family: var(--rd-font-mono);
    font-size: 10px;
    letter-spacing: .13em;
    color: var(--rd-muted);
    text-transform: uppercase;
}
.rd-chip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: var(--rd-pill);
    border: 1px solid var(--rd-border-2);
    background: var(--rd-soft);
    color: var(--rd-body) !important;
    text-decoration: none !important;
    transition: background .14s, border-color .14s, color .14s;
}
.rd-chip:hover,
.rd-chip.is-active {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: #fff !important;
}

/* ============ Sections ============ */
.rd-section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rd-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.rd-sec-title {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--rd-ink);
    letter-spacing: -.02em;
    margin: 0;
}
.rd-sec-title::before {
    content: "";
    width: 7px;
    height: 22px;
    border-radius: 4px;
    background: var(--rd-primary);
}
.rd-sec-meta {
    font-family: var(--rd-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--rd-muted);
    text-transform: uppercase;
}
.rd-sec-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--rd-primary);
    text-decoration: none;
}

/* ============ Cartes spécialité ============ */
.rd-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px;
}
.rd-cat-card {
    text-align: left;
    border-radius: 14px;
    border: 1px solid var(--rd-border);
    background: #fff;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none !important;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.rd-cat-card:hover {
    border-color: var(--rd-primary);
    box-shadow: 0 6px 18px rgba(118, 109, 244, .12);
    transform: translateY(-2px);
}
.rd-cat-card .name {
    font-family: var(--rd-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--rd-ink);
}
.rd-cat-card .rd-count {
    font-family: var(--rd-font-mono);
    font-size: 12px;
    color: var(--rd-muted);
}

/* ============ Cartes offres ============ */
.rd-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 14px;
    align-items: stretch;
}
.rd-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 14px;
}
.rd-job-card,
.rd-feat-card {
    border-radius: 16px;
    border: 1px solid var(--rd-border);
    background: #fff;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(20, 33, 61, .05);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.rd-feat-card {
    border-radius: 18px;
    padding: 22px 24px;
}
.rd-job-card:hover,
.rd-feat-card:hover {
    border-color: var(--rd-primary);
    box-shadow: 0 10px 26px rgba(118, 109, 244, .14);
    transform: translateY(-2px);
}
.rd-avatar {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: var(--rd-soft-2);
    border: 1px solid var(--rd-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--rd-ink);
}
.rd-avatar--accent {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(118, 109, 244, .10);
    border-color: rgba(118, 109, 244, .22);
    color: var(--rd-primary-dark);
    font-size: 16px;
}
.rd-job-title {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--rd-ink) !important;
    text-decoration: none !important;
}
.rd-job-title:hover {
    color: var(--rd-primary) !important;
}
.rd-feat-card .rd-job-title {
    font-size: 19px;
}
.rd-job-co {
    font-size: 13px;
    color: var(--rd-muted);
}
.rd-job-co b {
    font-weight: 700;
    color: var(--rd-ink);
}
.rd-job-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--rd-muted-2);
}
.rd-badge-mode {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: var(--rd-pill);
    white-space: nowrap;
}
.rd-badge-mode.is-remote { background: var(--rd-green-bg); color: var(--rd-green); }
.rd-badge-mode.is-hybrid { background: rgba(118, 109, 244, .12); color: var(--rd-primary-dark); }
.rd-badge-mode.is-onsite { background: #EEF1F6; color: var(--rd-muted); }
.rd-badge-new {
    font-family: var(--rd-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--rd-primary-dark);
    background: rgba(118, 109, 244, .12);
    padding: 3px 8px;
    border-radius: var(--rd-pill);
}
.rd-tags {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.rd-tag {
    font-family: var(--rd-font-mono);
    font-size: 11px;
    color: var(--rd-body);
    background: var(--rd-soft);
    border: 1px solid var(--rd-border);
    padding: 4px 9px;
    border-radius: 8px;
    white-space: nowrap;
}
.rd-salary {
    font-family: var(--rd-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-ink);
    white-space: nowrap;
}
.rd-feat-card .rd-salary {
    font-size: 17px;
}
.rd-job-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--rd-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rd-job-foot .sub {
    font-size: 12px;
    color: var(--rd-muted);
}
.rd-feat-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rd-body);
}
.rd-check-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.rd-check-list .item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rd-body);
}
.rd-check-list .item::before {
    content: "✓";
    color: var(--rd-green);
    font-weight: 800;
    flex: none;
}
.rd-company-box {
    border-radius: 14px;
    background: var(--rd-soft);
    border: 1px solid var(--rd-border);
    padding: 20px;
}
.rd-company-box .kicker {
    font-family: var(--rd-font-mono);
    font-size: 10px;
    letter-spacing: .13em;
    color: var(--rd-muted);
    margin-bottom: 14px;
    text-transform: uppercase;
}
.rd-company-box .name {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--rd-ink);
    margin-bottom: 14px;
}
.rd-company-box .rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--rd-border);
}
.rd-company-box .rows > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.rd-company-box .rows .k { color: var(--rd-muted); }
.rd-company-box .rows .v { color: var(--rd-ink); }
.rd-company-box .note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--rd-muted);
}

/* ============ Cartes entreprises ============ */
.rd-cos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 12px;
}
.rd-co-card {
    border-radius: 14px;
    border: 1px solid var(--rd-border);
    background: #fff;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-decoration: none !important;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.rd-co-card:hover {
    border-color: var(--rd-primary);
    box-shadow: 0 6px 18px rgba(118, 109, 244, .12);
    transform: translateY(-2px);
}
.rd-co-card .rd-avatar {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 13px;
}
.rd-co-card .name {
    font-family: var(--rd-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--rd-ink);
    line-height: 1.3;
}
.rd-co-card .sector {
    font-size: 12px;
    color: var(--rd-muted);
}
.rd-co-card .roles {
    font-family: var(--rd-font-mono);
    font-size: 11px;
    color: var(--rd-primary);
}

/* ============ Panneaux bas (salaires / recruteur) ============ */
.rd-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 14px;
}
.rd-panel {
    border-radius: 18px;
    border: 1px solid var(--rd-border);
    background: #fff;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rd-panel .head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.rd-panel .head .t {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--rd-ink);
}
.rd-panel p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--rd-muted);
    margin: 0;
}
.rd-salary-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}
.rd-salary-row .line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.rd-salary-row .label {
    font-size: 13px;
    font-weight: 600;
    color: #3C4759;
}
.rd-salary-row .range {
    font-family: var(--rd-font-mono);
    font-size: 13px;
    color: var(--rd-ink);
}
.rd-salary-row .bar {
    height: 6px;
    border-radius: 4px;
    background: #E7EAF1;
    overflow: hidden;
}
.rd-salary-row .bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--rd-primary);
}
.rd-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.rd-stat .num {
    font-family: var(--rd-font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--rd-green);
}
.rd-stat .lbl {
    font-size: 13px;
    color: var(--rd-muted-2);
}

/* ============ Bandeau alerte ============ */
.rd-alert-band {
    border-radius: 18px;
    background: var(--rd-hero);
    border: 1px solid rgba(118, 109, 244, .28);
    padding: 26px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.rd-alert-band .t {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--rd-ink);
    margin-bottom: 6px;
}
.rd-alert-band .s {
    font-size: 14px;
    color: var(--rd-muted-2);
}

/* ============ Footer ============ */
.rd-footer {
    margin-top: auto;
    border-top: 1px solid var(--rd-border);
    background: var(--rd-page);
    padding: 52px 48px 0;
}
.rd-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 32px;
}
.rd-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 300px;
}
.rd-footer-brand .about {
    font-size: 13px;
    line-height: 1.7;
    color: var(--rd-muted);
}
.rd-footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.rd-footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--rd-border);
    background: var(--rd-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rd-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--rd-body) !important;
    text-decoration: none !important;
}
.rd-footer-social a:hover {
    border-color: var(--rd-primary);
    color: var(--rd-primary) !important;
}
.rd-footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rd-footer-col .title {
    font-family: var(--rd-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--rd-muted);
    text-transform: uppercase;
}
.rd-footer-col a {
    font-size: 13px;
    color: var(--rd-muted) !important;
    text-decoration: none;
}
.rd-footer-col a:hover {
    color: var(--rd-primary) !important;
}
.rd-footer-bottom {
    border-top: 1px solid var(--rd-border);
    margin-top: 44px;
    padding: 22px 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.rd-footer-bottom .copy {
    font-family: var(--rd-font-mono);
    font-size: 11px;
    color: var(--rd-muted);
}
.rd-footer-bottom .links {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 12px;
}
.rd-footer-bottom .links a {
    color: var(--rd-muted) !important;
    text-decoration: none;
}
.rd-footer-bottom .links a:hover {
    color: var(--rd-primary) !important;
}

/* ============ Pagination ============ */
.rd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.rd-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--rd-border);
    background: var(--rd-soft);
    color: var(--rd-body) !important;
    font-family: var(--rd-font-mono);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}
.rd-page-btn.is-active,
.rd-page-btn:hover {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: #fff !important;
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
    .rd-header { padding: 14px 24px; }
    .rd-hero { padding: 34px 24px 24px; }
    .rd-section { padding: 24px 24px 18px; }
    .rd-footer { padding: 44px 24px 0; }
}
@media (max-width: 991px) {
    .rd-nav { display: none; }
    .rd-header-actions .rd-link,
    .rd-header-actions .rd-btn--outline { display: none; }
    .rd-burger { display: inline-flex; }
}
@media (max-width: 767px) {
    .rd-header { padding: 12px 16px; min-height: 64px; }
    .rd-logo { font-size: 26px; }
    .rd-hero { padding: 28px 16px 20px; }
    .rd-hero h1 { font-size: 24px; }
    .rd-section { padding: 20px 16px 14px; }
    .rd-footer { padding: 36px 16px 0; }
    .rd-search { flex-direction: column; }
    .rd-search-box { height: 54px; padding: 0 16px; }
    .rd-search-box--city { width: 100%; }
    .rd-search-btn { height: 54px; width: 100%; }
    .rd-kbd { display: none; }
    .rd-chip-group { border-right: 0; padding-right: 0; }
    .rd-panel { padding: 20px; }
    .rd-alert-band { padding: 20px; }
    .rd-alert-band .rd-btn--lg { width: 100%; }
}

.rd-kbd {
    font-family: var(--rd-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--rd-muted);
    background: var(--rd-soft-2);
    border: 1px solid var(--rd-border);
    padding: 4px 8px;
    border-radius: 7px;
    flex: none;
}

/* ============ Hero moderne (accueil) ============ */
.rd-hero--modern {
    position: relative;
    overflow: hidden;
    padding: 56px 48px 40px;
    background:
        radial-gradient(600px 300px at 12% -10%, rgba(118, 109, 244, .14), transparent 60%),
        radial-gradient(520px 280px at 88% 0%, rgba(92, 82, 224, .10), transparent 60%),
        var(--rd-hero);
}
.rd-hero--modern h1 {
    font-size: clamp(30px, 4.2vw, 44px);
    max-width: 780px;
    margin: 12px 0 10px;
}
.rd-grad {
    background: linear-gradient(92deg, var(--rd-primary), var(--rd-primary-dark) 60%, #4338CA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rd-hero--modern .rd-sub {
    font-size: 16px;
    max-width: 640px;
    line-height: 1.6;
}

/* Recherche « pill » unifiée */
.rd-search--pill {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--rd-border-2);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(20, 33, 61, .07);
    padding: 8px;
    margin-top: 26px;
}
.rd-search--pill .cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    min-width: 0;
    height: 52px;
}
.rd-search--pill .cell--kw {
    flex: 1;
}
.rd-search--pill .cell--city {
    width: 250px;
    flex: none;
    border-left: 1px solid var(--rd-border);
}
.rd-search--pill input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--rd-font-ui);
    font-size: 16px;
    color: var(--rd-ink);
}
.rd-search--pill select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--rd-font-ui);
    font-size: 15px;
    color: var(--rd-ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6678' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    padding-right: 22px;
}
.rd-search--pill .icon-kw { color: var(--rd-primary); display: inline-flex; flex: none; }
.rd-search--pill .icon-city { color: var(--rd-muted); display: inline-flex; flex: none; }
.rd-search--pill .rd-search-btn {
    height: 52px;
    border-radius: 13px;
    padding: 0 30px;
    flex: none;
}

/* Rangée de confiance */
.rd-trust {
    display: flex;
    align-items: center;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-family: var(--rd-font-mono);
    font-size: 12px;
    color: var(--rd-muted);
}
.rd-trust .item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rd-trust .item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rd-primary);
}
.rd-trust .item.ok::before {
    background: var(--rd-green);
}

@media (max-width: 767px) {
    .rd-hero--modern { padding: 34px 16px 26px; }
    .rd-search--pill {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        border-radius: 16px;
    }
    .rd-search--pill .cell--city {
        width: 100%;
        border-left: 0;
        border-top: 1px solid var(--rd-border);
    }
    .rd-search--pill .rd-search-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============ Harmonisation de l'ancien thème ============ */
/* Les pages internes (offres, dashboards, formulaires) gardent leurs
   composants d'origine mais adoptent l'accent violet du nouveau design. */
.button.primary-bg,
.primary-bg,
.rd-legacy-accent {
    background-color: var(--rd-primary) !important;
}
.button.primary-bg:hover,
a.button:hover {
    background-color: var(--rd-primary-dark) !important;
}

/* ============================================================
   Composants de pages internes (liste, détail, blog, auth, légal)
   ============================================================ */

/* ---- Bandeau de page + fil d'Ariane ---- */
.rd-page-head {
    padding: 30px 48px;
    background: var(--rd-hero);
    border-bottom: 1px solid var(--rd-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rd-page-head h1 {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -.025em;
    color: var(--rd-ink);
    margin: 0;
}
.rd-page-head .rd-sub {
    font-size: 15px;
    color: var(--rd-muted-2);
    max-width: 720px;
}
.rd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--rd-muted);
    list-style: none;
    margin: 0;
    padding: 0;
}
.rd-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rd-breadcrumb li + li::before {
    content: "/";
    color: var(--rd-border-3);
}
.rd-breadcrumb a {
    color: var(--rd-muted);
    text-decoration: none;
}
.rd-breadcrumb a:hover { color: var(--rd-primary); }
.rd-breadcrumb [aria-current] { color: var(--rd-ink); font-weight: 600; }

/* ---- Layout à deux colonnes (contenu + aside) ---- */
.rd-layout {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px 48px 50px;
    background: #fff;
}
@media (min-width: 992px) {
    .rd-layout { flex-direction: row; align-items: flex-start; }
    .rd-layout > .rd-main-col { flex: 1; min-width: 0; }
    .rd-layout > .rd-side-col { width: 330px; flex: none; position: sticky; top: 94px; }
}
@media (max-width: 1100px) {
    .rd-page-head { padding: 24px; }
    .rd-layout { padding: 24px 24px 40px; }
}
@media (max-width: 767px) {
    .rd-page-head { padding: 20px 16px; }
    .rd-layout { padding: 20px 16px 32px; }
}
/* Au-delà de 1100px, .rd-layout/.rd-section passent à leur padding
   plein (30px 48px…) ; combiné au centrage ci-dessus, ce padding
   devient un second retrait EN PLUS de la marge de centrage, ce qui
   désaligne les offres par rapport au logo/hero/footer (déjà centrés
   via .rd-header-row/.rd-footer-inner/.rd-page-head). On l'annule ici. */
@media (min-width: 1101px) {
    .rd-layout,
    .rd-section {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---- Filtres (listes d'offres) ---- */
.rd-filters {
    border-radius: 16px;
    border: 1px solid var(--rd-border);
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rd-filters .group { display: flex; flex-direction: column; gap: 10px; }
.rd-filters .group > .g-title {
    font-family: var(--rd-font-mono);
    font-size: 10px;
    letter-spacing: .13em;
    color: var(--rd-muted);
    text-transform: uppercase;
}
.rd-filters label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--rd-body);
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}
.rd-filters input[type="checkbox"],
.rd-filters input[type="radio"] {
    accent-color: var(--rd-primary);
    width: 15px;
    height: 15px;
}

/* ---- Prose (contenus riches : légal, blog, description d'offre) ---- */
.rd-prose {
    font-size: 15px;
    line-height: 1.75;
    color: var(--rd-body);
    max-width: 760px;
}
.rd-prose h2, .rd-prose h3, .rd-prose h4 {
    font-family: var(--rd-font-display);
    font-weight: 700;
    color: var(--rd-ink);
    letter-spacing: -.015em;
    margin: 1.6em 0 .6em;
}
.rd-prose h2 { font-size: 22px; }
.rd-prose h3 { font-size: 18px; }
.rd-prose p { margin: 0 0 1em; }
.rd-prose ul, .rd-prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.rd-prose li { margin-bottom: .45em; }
.rd-prose a { color: var(--rd-primary); }
.rd-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---- Cartes / formulaires d'authentification ---- */
.rd-auth-wrap {
    display: flex;
    justify-content: center;
    padding: 48px 16px 64px;
}
.rd-auth-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid var(--rd-border);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(20, 33, 61, .08);
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rd-auth-card--wide { max-width: 640px; }
.rd-auth-card h1 {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.02em;
    color: var(--rd-ink);
    margin: 0;
}
.rd-auth-card .lead { font-size: 14px; color: var(--rd-muted); margin: -8px 0 0; }
.rd-field { display: flex; flex-direction: column; gap: 7px; }
.rd-field > label {
    font-size: 13px;
    font-weight: 700;
    color: var(--rd-ink);
    margin: 0;
}
.rd-input, .rd-select, .rd-textarea,
.rd-auth-card input[type="text"],
.rd-auth-card input[type="email"],
.rd-auth-card input[type="password"],
.rd-auth-card input[type="tel"],
.rd-auth-card select,
.rd-auth-card textarea {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border-radius: 12px;
    border: 1px solid var(--rd-border-2);
    background: var(--rd-soft);
    font-family: var(--rd-font-ui);
    font-size: 15px;
    color: var(--rd-ink);
    outline: none;
    transition: border-color .14s, background .14s, box-shadow .14s;
}
.rd-textarea, .rd-auth-card textarea { height: auto; min-height: 120px; padding: 12px 15px; }
.rd-input:focus, .rd-select:focus, .rd-textarea:focus,
.rd-auth-card input:focus, .rd-auth-card select:focus, .rd-auth-card textarea:focus {
    border-color: var(--rd-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(118, 109, 244, .12);
}
.rd-form-hint { font-size: 12px; color: var(--rd-muted); }
.rd-form-error, .rd-auth-card ul li { color: #C0392B; font-size: 13px; }
.rd-form-error ul { margin: 0; padding-left: 18px; }
.rd-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--rd-muted);
}
.rd-check input { accent-color: var(--rd-primary); margin-top: 3px; }
.rd-auth-alt { text-align: center; font-size: 13px; color: var(--rd-muted); }
.rd-auth-alt a { color: var(--rd-primary); font-weight: 700; }
.rd-alert-msg {
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid;
}
.rd-alert-msg.is-success { background: var(--rd-green-bg); color: var(--rd-green); border-color: rgba(31, 130, 68, .25); }
.rd-alert-msg.is-error { background: #FDEEEC; color: #C0392B; border-color: rgba(192, 57, 43, .25); }

/* Choix de type de compte (inscription) */
.rd-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.rd-seg .opt {
    border: 1px solid var(--rd-border-2);
    border-radius: 13px;
    background: var(--rd-soft);
    padding: 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--rd-body);
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
.rd-seg .opt.is-active,
.rd-seg .opt:hover {
    border-color: var(--rd-primary);
    background: rgba(118, 109, 244, .08);
    color: var(--rd-primary-dark);
}

/* ---- Cartes articles (blog) ---- */
.rd-articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 14px;
}
.rd-article-card {
    border-radius: 16px;
    border: 1px solid var(--rd-border);
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(20, 33, 61, .05);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.rd-article-card:hover {
    border-color: var(--rd-primary);
    box-shadow: 0 10px 26px rgba(118, 109, 244, .14);
    transform: translateY(-2px);
}
.rd-article-card .date {
    font-family: var(--rd-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--rd-muted);
    text-transform: uppercase;
}
.rd-article-card h3 { margin: 0; }
.rd-article-card h3 a {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--rd-ink) !important;
    text-decoration: none !important;
}
.rd-article-card h3 a:hover { color: var(--rd-primary) !important; }
.rd-article-card .excerpt { font-size: 14px; line-height: 1.65; color: var(--rd-muted); }

/* ---- Pagination KNP ----
   Le template réellement configuré (knp_paginator.yaml) est
   @KnpPaginator/Pagination/sliding.html.twig, qui génère
   <div class="pagination"><span class="page|current|first|previous|next|last"><a>…
   — PAS un <ul class="pagination"><li>. On style les deux structures
   par prudence (au cas où un autre template KNP serait utilisé ailleurs). */
.rd-knp nav { display: flex; justify-content: center; }
.rd-knp div.pagination,
.rd-knp ul.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}
.rd-knp div.pagination span,
.rd-knp div.pagination span a,
.rd-knp ul.pagination li a,
.rd-knp ul.pagination li span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--rd-border);
    background: var(--rd-soft);
    color: var(--rd-body);
    font-family: var(--rd-font-mono);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.rd-knp div.pagination span.current,
.rd-knp div.pagination span a:hover,
.rd-knp ul.pagination li.active span,
.rd-knp ul.pagination li a:hover {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: #fff;
}
/* span.current n'a pas de <a> imbriqué (c'est la page active, pas un lien) :
   sans ceci le padding/border ci-dessus ne s'appliquerait pas à son propre span. */
.rd-knp div.pagination span.current {
    padding: 0 12px;
}

/* ---- État vide / page d'erreur ---- */
.rd-empty {
    border-radius: 18px;
    border: 1px dashed #C9D0DC;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.rd-empty .t {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--rd-ink);
}
.rd-empty .s { font-size: 14px; color: var(--rd-muted); }
.rd-error-page {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 60px 20px;
}
.rd-error-page .code {
    font-family: var(--rd-font-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--rd-primary);
}
.rd-error-page h1 {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: clamp(26px, 4vw, 38px);
    color: var(--rd-ink);
    margin: 0;
}
.rd-error-page p { font-size: 15px; color: var(--rd-muted); max-width: 480px; }

/* ============================================================
   Mise en page alternative de l'accueil — hero scindé en deux
   colonnes + corps en disposition « dashboard » (flux principal
   + barre latérale compacte), plutôt que la page d'atterrissage
   linéaire à sections plein-écran. MÊME palette violette/grise
   que le reste du site (aucune couleur nouvelle ici).
   ============================================================ */

/* ---- Hero scindé ----
   Le fond (bande claire) reste plein écran ; c'est le CONTENU
   (.rd-hero-inner) qui est centré avec une largeur maximale. */
.rd-hero--split {
    padding: 44px 48px;
    background: var(--rd-hero);
    border-bottom: 1px solid var(--rd-border);
}
.rd-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 992px) {
    .rd-hero--split { padding: 52px 48px; }
    .rd-hero-inner {
        grid-template-columns: 1.3fr 0.9fr;
        gap: 48px;
    }
}
.rd-hero--split .hero-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rd-hero--split h1 {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 36px);
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--rd-ink);
    margin: 0;
}
.rd-hero--split .rd-sub {
    font-size: 15px;
    color: var(--rd-muted-2);
    max-width: 520px;
}

/* Widget « stats en direct » à droite du hero */
.hero-stat-card {
    background: #fff;
    border: 1px solid var(--rd-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(20, 33, 61, .06);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hero-stat-card .hsc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.hero-stat-card .hsc-head .big {
    font-family: var(--rd-font-mono);
    font-size: 30px;
    font-weight: 600;
    color: var(--rd-primary-dark);
}
.hero-stat-card .hsc-head .lbl {
    font-size: 12px;
    color: var(--rd-muted);
    text-align: right;
    max-width: 130px;
}
.hero-stat-card .hsc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--rd-border);
    padding-top: 14px;
}
.hero-stat-card .hsc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rd-border);
    text-decoration: none !important;
}
.hero-stat-card .hsc-row:last-child { border-bottom: 0; }
.hero-stat-card .hsc-row .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-ink) !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-stat-card .hsc-row .sal {
    font-family: var(--rd-font-mono);
    font-size: 12px;
    color: var(--rd-muted);
    flex: none;
}
.hero-stat-card .hsc-row:hover .name { color: var(--rd-primary) !important; }

/* ---- Barre latérale compacte (accueil) ---- */
.rd-side-block {
    background: #fff;
    border: 1px solid var(--rd-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}
.rd-side-block .sb-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--rd-ink);
    margin: 0 0 14px;
}
.rd-side-block .sb-title .meta {
    font-family: var(--rd-font-mono);
    font-size: 10px;
    color: var(--rd-muted);
    font-weight: 600;
}
.rd-side-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rd-side-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rd-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-body) !important;
    text-decoration: none !important;
}
.rd-side-list a:last-child { border-bottom: 0; }
.rd-side-list a:hover { color: var(--rd-primary) !important; }
.rd-side-list a .n {
    font-family: var(--rd-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--rd-muted);
    background: var(--rd-soft);
    border-radius: var(--rd-pill);
    padding: 2px 8px;
    flex: none;
}
.rd-side-list a:hover .n { color: var(--rd-primary-dark); background: rgba(118, 109, 244, .12); }

/* Panneau salaires / CTA recruteur compressés pour la colonne latérale */
.rd-side-block .rd-salary-row { margin-bottom: 12px; }
.rd-side-block .rd-salary-row .label { font-size: 12px; }
.rd-side-block .rd-salary-row .range { font-size: 12px; }
.rd-side-block .rd-stat .num { font-size: 17px; }
.rd-side-block .rd-stat .lbl { font-size: 12px; }

@media (max-width: 767px) {
    .rd-hero--split { padding: 28px 16px; }
}

/* ============================================================
   Alignement de toute la page : header, hero/bandeau de page,
   contenu (.rd-layout/.rd-section) et footer partagent la même
   colonne centrée (max-width 1200px) sur TOUTES les pages, pas
   seulement l'accueil. .rd-header-row/.rd-footer-inner sont des
   wrappers neutres présents sur TOUTES les pages (voir
   partials/_rd_header et _rd_footer). ============================================================ */
.rd-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}
.rd-header-row,
.rd-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}
/* .rd-page-head (bandeau titre + fil d'Ariane des pages internes) garde
   son fond/bordure en pleine largeur, mais son contenu se centre dans
   la même colonne de 1200px dès que l'écran est assez large — via un
   padding calculé plutôt qu'un wrapper, pour ne toucher aucun template. */
@media (min-width: 1101px) {
    .rd-page-head {
        padding-left: max(48px, calc((100% - 1200px) / 2));
        padding-right: max(48px, calc((100% - 1200px) / 2));
    }
}

/* ============================================================
   Dashboard candidat (Mon CV) : nav latérale + cartes de section
   ============================================================ */
.rd-dash-nav {
    background: #fff;
    border: 1px solid var(--rd-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rd-dash-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 6px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rd-border);
}
.rd-dash-user img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--rd-border);
    flex: none;
}
.rd-dash-user .name {
    font-family: var(--rd-font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--rd-ink);
    line-height: 1.3;
}
.rd-dash-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-body);
    text-decoration: none !important;
    white-space: nowrap;
}
.rd-dash-nav a svg { flex: none; width: 16px; height: 16px; }
.rd-dash-nav a:hover { background: var(--rd-soft); color: var(--rd-ink); }
.rd-dash-nav a.is-active { background: rgba(118, 109, 244, .10); color: var(--rd-primary-dark) !important; }
.rd-dash-nav .sep { height: 1px; background: var(--rd-border); margin: 8px 6px; flex: none; }
.rd-dash-nav a.is-danger { color: #C0392B; }
.rd-dash-nav a.is-danger:hover { background: #FDEEEC; }

@media (max-width: 991px) {
    .rd-dash-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .rd-dash-user, .rd-dash-nav .sep { display: none; }
    .rd-dash-nav a { flex: none; }
}

.rd-dash-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rd-dash-card {
    background: #fff;
    border: 1px solid var(--rd-border);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rd-dash-card .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rd-dash-card .head h2 {
    font-family: var(--rd-font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--rd-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.rd-dash-card .head svg { color: var(--rd-primary); flex: none; width: 18px; height: 18px; }

.rd-dash-photo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rd-dash-photo-row img {
    width: 76px; height: 76px; border-radius: 16px; object-fit: cover;
    border: 1px solid var(--rd-border); flex: none;
}
.rd-file-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    height: 38px; padding: 0 16px; border-radius: 11px;
    border: 1px solid var(--rd-border-3); background: #fff; color: var(--rd-ink);
    font-family: var(--rd-font-ui); font-size: 13px; font-weight: 700;
}
.rd-file-btn:hover { background: var(--rd-soft); }
.rd-file-btn input[type="file"] { display: none; }

.rd-dash-info-list { display: flex; flex-direction: column; gap: 10px; }
.rd-dash-info-list .row-item { display: flex; gap: 8px; font-size: 14px; }
.rd-dash-info-list .row-item span.k { color: var(--rd-muted); flex: none; min-width: 140px; }
.rd-dash-info-list .row-item span.v { color: var(--rd-ink); font-weight: 600; }

.rd-edit-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--rd-border-3); background: #fff; color: var(--rd-ink) !important;
    font-family: var(--rd-font-ui); font-size: 12px; font-weight: 700;
    text-decoration: none !important; cursor: pointer;
}
.rd-edit-trigger:hover { background: var(--rd-soft); }
.rd-edit-trigger svg { width: 13px; height: 13px; }

.rd-dash-form {
    display: flex; flex-direction: column; gap: 14px;
    padding-top: 14px; margin-top: 2px; border-top: 1px dashed var(--rd-border-2);
}
.rd-dash-form[hidden] { display: none; }
.rd-dash-form .grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) {
    .rd-dash-form .grid-2 { grid-template-columns: 1fr 1fr; }
}
.rd-dash-form .actions { display: flex; align-items: center; gap: 10px; }

.rd-dash-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 14px 0; border-top: 1px solid var(--rd-border);
}
.rd-dash-item:first-of-type { border-top: 0; padding-top: 0; }
.rd-dash-item .main { min-width: 0; }
.rd-dash-item .title { font-weight: 700; color: var(--rd-ink); font-size: 14px; }
.rd-dash-item .meta { font-size: 12px; color: var(--rd-muted); margin-top: 2px; }
.rd-dash-item .desc { font-size: 13px; color: var(--rd-body); margin-top: 6px; line-height: 1.5; }
.rd-dash-item .actions { display: flex; gap: 6px; flex: none; }
.rd-dash-item .icon-btn {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--rd-border);
    background: #fff; color: var(--rd-muted); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer;
}
.rd-dash-item .icon-btn:hover { background: var(--rd-soft); color: var(--rd-ink); }
.rd-dash-item .icon-btn.is-danger:hover { background: #FDEEEC; color: #C0392B; }
.rd-dash-item .icon-btn svg { width: 14px; height: 14px; }

.rd-skill-search { position: relative; }
.rd-skill-pills { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
.rd-skill-pill { position: relative; }
.rd-skill-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rd-skill-pill label {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border-radius: var(--rd-pill); border: 1px solid var(--rd-border-3);
    font-size: 13px; font-weight: 600; color: var(--rd-body); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.rd-skill-pill input:checked + label {
    background: var(--rd-primary); border-color: var(--rd-primary); color: #fff;
}
.rd-skill-pill.is-hidden { display: none; }
.rd-skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-skill-chip {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border-radius: var(--rd-pill); background: var(--rd-soft-2); font-size: 12px;
    font-weight: 600; color: var(--rd-ink);
}

@media (max-width: 767px) {
    .rd-dash-card { padding: 16px; border-radius: 14px; }
    .rd-dash-info-list .row-item { flex-direction: column; gap: 2px; }
    .rd-dash-info-list .row-item span.k { min-width: 0; }
    .rd-dash-item { flex-direction: column; }
    .rd-dash-photo-row { gap: 14px; }
}