/* Inter auto-hébergée (variable, latin + latin-ext) : évite d'envoyer l'IP des visiteurs à Google. */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   VARIABLES — light (default, matches WoP) + dark override
   ============================================================= */
:root {
    --c-bg:        #ffffff;
    --c-surface:   #f8f8f9;
    --c-border:    #d0d0d5;
    --c-dark:      #1a1a1a;
    --c-mid:       #525260;
    --c-muted:     #636375;
    --c-faint:     #737381;
    --c-green-bg:  rgba(22, 163, 74, .08);
    --c-green:     #16a34a;
    --c-chip-bg:   #f1f1f4;
    --c-chip-ink:  #5a5a66;
    --c-chip-bdr:  #c8c8ce;
    /* Accent bleu-vert : texte/fond >= 4.5:1 sur --c-bg et --c-surface (AA) */
    --c-accent:      #0b6670;
    --c-accent-ink:  #ffffff;
    --c-accent-bg:   rgba(11, 102, 112, .10);
    --c-accent-bdr:  rgba(11, 102, 112, .35);
    --nav-h:       60px;
    --side-w:      328px;
    --side-pad:    24px;
}

[data-theme="dark"] {
    --c-bg:        #0f0f11;
    --c-surface:   #161618;
    --c-border:    #38383f;
    --c-dark:      #f0f0f2;
    --c-mid:       #a0a0ae;
    --c-muted:     #8e8e9c;
    --c-faint:     #7f7f8f;
    --c-green-bg:  rgba(74, 222, 128, .10);
    --c-green:     #4ade80;
    --c-chip-bg:   #1e1e22;
    --c-chip-ink:  #9090a0;
    --c-chip-bdr:  #414149;
    --c-accent:      #4fd1c5;
    --c-accent-ink:  #0f0f11;
    --c-accent-bg:   rgba(79, 209, 197, .14);
    --c-accent-bdr:  rgba(79, 209, 197, .40);
}

/* =============================================================
   RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--c-bg);
    color: var(--c-dark);
    line-height: 1.6;
    font-size: 16px;
    transition: background .2s, color .2s;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--c-dark);
    color: var(--c-bg);
    padding: 8px 16px;
    z-index: 200;
    font-size: .875rem;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Global focus indicator */
:focus-visible {
    outline: 2px solid var(--c-dark);
    outline-offset: 3px;
    border-radius: 3px;
}

/* =============================================================
   TOP NAV
   ============================================================= */
.top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    z-index: 100;
    transition: background .2s, border-color .2s;
}

.top-nav__inner {
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-nav__links { display: flex; align-items: center; gap: 8px; }

.top-nav__brand {
    text-decoration: none;
}

.nav-logo-mark {
    height: 42px;
    padding: 0 16px;
    gap: 8px;
    background: var(--c-bg);
    color: var(--c-muted);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
}
.nav-logo-mark:hover { color: var(--c-dark); border-color: var(--c-mid); }
.nav-logo-mark.is-active,
.nav-logo-mark.is-active:hover {
    background: var(--c-dark);
    color: var(--c-bg);
    border-color: var(--c-dark);
}

.top-nav__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .2s;
}
.icon-btn:hover { color: var(--c-dark); border-color: var(--c-mid); }

/* Moon visible in light mode, sun visible in dark mode */
.icon-sun  { display: none; }
[data-theme="dark"] .icon-sun  { display: flex; }
[data-theme="dark"] .icon-moon { display: none; }

/* =============================================================
   PAGE LAYOUT
   ============================================================= */
.page-layout {
    display: flex;
    min-height: 100vh;
    padding-top: var(--nav-h);
}

/* =============================================================
   SIDEBAR
   ============================================================= */
.sidebar {
    width: var(--side-w);
    flex-shrink: 0;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
    background: var(--c-bg);
    border-right: 1px solid var(--c-border);
    transition: background .2s, border-color .2s;
}

.sidebar__inner {
    padding: 28px var(--side-pad) 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Profile photo */
.s-photo-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.s-photo {
    width: 88px; height: 88px;
    border-radius: 50%;
    background-color: var(--c-surface);
    background-size: cover;
    background-position: center 15%;
    background-repeat: no-repeat;
    border: 2px solid var(--c-border);
    overflow: hidden;
    transition: border-color .2s;
}

.s-photo__init {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-muted);
    letter-spacing: 1px;
}

/* Open to Work badge */
.s-otw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-green);
    background: var(--c-green-bg);
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
}

.s-otw__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

/* Identity */
.s-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.s-name {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-dark);
}

/* Prénom et nom ne se coupent que si la place manque vraiment */
.s-name__part { white-space: nowrap; }

.s-role {
    font-size: .78rem;
    font-weight: 500;
    color: var(--c-dark);
    margin-top: 3px;
}

.s-sub {
    font-size: .72rem;
    color: var(--c-mid);
    line-height: 1.55;
    margin-top: 2px;
}

.s-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .73rem;
    color: var(--c-muted);
    margin-top: 5px;
}
.s-loc svg { flex-shrink: 0; opacity: .5; }

/* Experience row */
.s-exp-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    transition: border-color .2s;
}

.s-exp-line + .s-exp-line { margin-top: 4px; }

.s-exp-years {
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-dark);
    white-space: nowrap;
}

.s-exp-label {
    font-size: .72rem;
    color: var(--c-muted);
}

/* CTA buttons */
.s-ctas {
    display: flex;
    align-items: center;
    gap: 8px;
}

.s-btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border-radius: 100px;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s, background .2s, color .2s;
}
.s-btn-primary:hover { opacity: .82; }

/* Adresse e-mail en clair + bouton « Copier » */
.s-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -4px;
}

.s-mail__addr {
    min-width: 0;
    font-size: .74rem;
    color: var(--c-mid);
    overflow-wrap: anywhere;
    user-select: all;
}

.s-mail__copy {
    flex-shrink: 0;
    padding: 3px 10px;
    background: transparent;
    color: var(--c-dark);
    border: 1px solid var(--c-border);
    border-radius: 100px;
    font: inherit;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.s-mail__copy:hover { background: var(--c-surface); border-color: var(--c-muted); }

/* Social links (LinkedIn / GitLab) */
.s-socials {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    font-size: .78rem;
    font-weight: 500;
    color: var(--c-mid);
    transition: background .15s, color .15s, border-color .15s;
}
.s-social-link svg { flex-shrink: 0; }
.s-social-link:hover {
    background: var(--c-surface);
    color: var(--c-dark);
    border-color: var(--c-mid);
}
.s-social-link--cv {
    margin-top: 8px;
    justify-content: center;
    font-weight: 600;
}

/* Libellé court du bouton CV (visible uniquement sur mobile) */
.s-lbl-court { display: none; }

/* Sidebar nav tabs */
.s-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--c-muted);
    text-decoration: none;
    transition: color .15s, background .15s;
}
.s-tab svg { flex-shrink: 0; opacity: .55; transition: opacity .15s; }
.s-tab:hover {
    color: var(--c-dark);
    background: var(--c-surface);
}
.s-tab:hover svg { opacity: 1; }

.s-tab--active {
    color: var(--c-accent);
    font-weight: 600;
    background: var(--c-surface);
}
.s-tab--active svg { opacity: 1; }

/* =============================================================
   MAIN CONTENT
   ============================================================= */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 44px 60px 80px;
}

/* Section label — small, uppercase, tracked */
.sec-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 18px;
}

/* =============================================================
   INDEX — CV SECTIONS
   ============================================================= */
.cv-section {
    margin-bottom: 56px;
}
.cv-section:last-child { margin-bottom: 0; }

/* About */
.about-text {
    font-size: 1rem;
    color: var(--c-mid);
    line-height: 1.6;
}

/* Deux colonnes : contenu (à propos + compétences) et fausse pub n8n ; la pub passe dessous sur petit écran */
.about-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 56px;
}
.about-col { flex: 1 1 0; min-width: 0; }
.about-col .cv-section:last-child { margin-bottom: 0; }

.fake-ad {
    flex: 0 0 240px;
    min-height: 340px; /* ≈ 2× la hauteur d'origine, étirée vers le bas */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--c-surface);
    border: 1px dashed var(--c-accent-bdr);
    border-radius: 8px;
}
.fake-ad__tag {
    font-size: .65rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--c-faint);
    margin-bottom: 6px;
}
.fake-ad__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-dark);
    margin-bottom: 6px;
}
.fake-ad__text {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--c-mid);
    margin-bottom: 10px;
    flex: 1 1 auto;
}
.fake-ad__cta {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    text-decoration: none;
}
.fake-ad__cta:hover { opacity: .88; }
.fake-ad__cta:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (max-width: 960px) {
    .about-row { flex-direction: column; gap: 20px; }
    .about-col { width: 100%; }
    .fake-ad { flex-basis: auto; width: 100%; max-width: 70ch; min-height: 0; }
}

/* Skills */
.skill-groups { display: flex; flex-direction: column; gap: 14px; }

.skill-group__name {
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--c-faint);
    margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
    font-size: .72rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--c-chip-bg);
    color: var(--c-chip-ink);
    border: 1px solid var(--c-chip-bdr);
    transition: background .15s, color .15s;
}

/* Première famille (Backend) mise en avant */
.skill-group:first-child .chip {
    background: var(--c-accent-bg);
    color: var(--c-accent);
    border-color: var(--c-accent-bdr);
    font-weight: 700;
}

/* Experiences */
.exp-block {
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--c-border);
    scroll-margin-top: 32px;
    transition: border-color .2s;
}
.exp-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.exp-head { margin-bottom: 16px; }

.exp-title {
    font-size: .97rem;
    font-weight: 600;
    color: var(--c-dark);
    line-height: 1.3;
}

.exp-company {
    font-size: .79rem;
    color: var(--c-mid);
    margin-top: 3px;
}

.exp-dates {
    font-size: .71rem;
    color: var(--c-faint);
    margin-top: 4px;
}

.exp-web-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .79rem;
    color: var(--c-muted);
    transition: color .15s;
}
.exp-web-link:hover { color: var(--c-accent); }
.exp-web-link svg { flex-shrink: 0; opacity: .6; }

/* Expériences compactes (accueil, « Parcours précédent ») */
.exp-subtitle {
    font-size: .79rem;
    font-weight: 600;
    color: var(--c-mid);
    margin: 8px 0 28px;
    padding-top: 28px;
    border-top: 1px solid var(--c-border);
}
.exp-block--compact { padding-bottom: 24px; margin-bottom: 24px; }
.exp-block--compact .exp-head { margin-bottom: 8px; }
.exp-compact__ctx {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-mid);
    margin-bottom: 8px;
}
.exp-compact__link {
    font-size: .79rem;
    color: var(--c-mid);
    text-decoration: underline;
}
.exp-compact__link:hover { color: var(--c-accent); }

.mission { margin-top: 16px; }

.mission__head {
    font-size: .79rem;
    font-weight: 600;
    color: var(--c-dark);
    margin-bottom: 5px;
}

.mission__ctx {
    font-size: 1rem;
    color: var(--c-mid);
    line-height: 1.6;
    margin-bottom: 8px;
}

.mission__list { display: flex; flex-direction: column; gap: 4px; }

.mission__list li {
    position: relative;
    padding-left: 16px;
    font-size: 1rem;
    color: var(--c-mid);
    line-height: 1.6;
}
.mission__list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--c-faint);
}

.exp-chips { margin-top: 14px; }
.exp-chips .chip { font-size: .67rem; padding: 3px 8px; }

/* Projects */
.project-block {
    padding: 18px 0;
    border-bottom: 1px solid var(--c-border);
    transition: border-color .2s;
}
.project-block:last-child { border-bottom: none; }

.project-block h2,
.project-block h3 {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-dark);
    margin-bottom: 7px;
}

.project-block p {
    font-size: 1rem;
    color: var(--c-mid);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Formation */
.diplome {
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
    transition: border-color .2s;
}
.diplome:last-child { border-bottom: none; }

.diplome__titre {
    font-size: .84rem;
    font-weight: 600;
    color: var(--c-dark);
}
.diplome__lieu {
    font-size: .74rem;
    color: var(--c-muted);
    margin-top: 2px;
}

/* =============================================================
   EXPERIENCES LIST PAGE
   ============================================================= */
.exp-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--c-border);
    gap: 16px;
    transition: border-color .2s;
}
.exp-list-item:last-child { border-bottom: none; }

.exp-list-item__title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--c-dark);
}
.exp-list-item__title a { transition: color .15s; }
.exp-list-item__title a:hover { color: var(--c-accent); }

.exp-list-item__company {
    font-size: .77rem;
    color: var(--c-mid);
    margin-top: 3px;
}

.exp-list-item__ctx {
    font-size: .9375rem;
    color: var(--c-mid);
    margin-top: 3px;
    line-height: 1.6;
}

.exp-list-item__dates {
    font-size: .72rem;
    color: var(--c-faint);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* =============================================================
   EXPERIENCE DETAIL PAGE
   ============================================================= */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .77rem;
    color: var(--c-muted);
    margin-bottom: 28px;
    transition: color .15s;
}
.back-link:hover { color: var(--c-accent); }

.exp-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 28px;
    flex-wrap: wrap;
    transition: border-color .2s;
}

.exp-detail__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-dark);
}
.exp-detail__company {
    font-size: .84rem;
    color: var(--c-mid);
    margin-top: 4px;
}
.exp-detail__meta {
    font-size: .9375rem;
    color: var(--c-mid);
    margin-top: 3px;
}

.exp-detail__info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: .75rem;
    color: var(--c-muted);
    white-space: nowrap;
}

.mission-detail { margin-bottom: 28px; }

.mission-detail__title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--c-dark);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 12px;
    transition: border-color .2s;
}

.mission-detail__context {
    font-size: 1rem;
    color: var(--c-mid);
    line-height: 1.6;
    margin-bottom: 12px;
}

.exp__list { display: flex; flex-direction: column; gap: 5px; }

.exp__list li {
    position: relative;
    padding-left: 16px;
    font-size: 1rem;
    color: var(--c-mid);
    line-height: 1.6;
}
.exp__list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--c-faint);
}

.exp-detail__stack {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--c-border);
    transition: border-color .2s;
}

/* =============================================================
   FORMATION PAGE
   ============================================================= */
.form-subsection { margin-bottom: 36px; }
.form-subsection:last-child { margin-bottom: 0; }

.lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--c-border);
    transition: border-color .2s;
}
.lang-item:last-child { border-bottom: none; }

.lang-item strong {
    font-size: .82rem;
    font-weight: 500;
    color: var(--c-dark);
}
.lang-item span {
    font-size: .75rem;
    color: var(--c-muted);
}

/* Largeur de lecture : ~70 caractères pour les textes (les badges restent libres) */
.about-text,
.exp-compact__ctx,
.mission__ctx,
.mission__list,
.project-block p,
.exp-list-item__ctx,
.exp-detail__meta,
.mission-detail__context,
.exp__list,
.wiki-intro,
.wiki-liste__resume,
.wiki-section__desc,
.wiki-prose > :not(pre):not(table) { max-width: 70ch; }

/* Écrans peu hauts : sidebar resserrée pour tenir sans défilement (768 px) */
@media (min-width: 681px) and (max-height: 820px) {
    .sidebar__inner { padding: 16px var(--side-pad) 16px; gap: 10px; }
    .s-photo-wrap { gap: 8px; }
    .s-photo { width: 64px; height: 64px; }
    .s-exp-row { padding: 8px 0; }
    .s-social-link { padding: 6px 10px; }
    .s-social-link--cv { margin-top: 4px; }
    .s-tab { padding: 6px 10px; }
    .s-sub { line-height: 1.4; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* Plein écran : sous-titre et adresse e-mail + « Copier » restent sur une seule ligne */
@media (min-width: 961px) {
    .s-sub,
    .s-mail__addr { white-space: nowrap; }
}

@media (max-width: 960px) {
    :root { --side-w: 228px; --side-pad: 18px; }
    .main-content { padding: 36px 36px 60px; }
}

@media (max-width: 680px) {
    .page-layout { flex-direction: column; }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--c-border);
    }

    .sidebar__inner { padding: 16px 16px 0; gap: 12px; }

    .s-exp-row, .s-sub { display: none; }

    /* Trois boutons compacts sur une ligne : icône + libellé court */
    .s-socials { flex-direction: row; gap: 6px; }
    .s-social-link,
    .s-social-link--cv {
        flex: 1 1 0;
        min-width: 0;
        margin-top: 0;
        justify-content: center;
        gap: 6px;
        padding: 8px 6px;
        font-size: .72rem;
        white-space: nowrap;
    }
    .s-lbl-long { display: none; }
    .s-lbl-court { display: inline; }

    /* Barre du haut : réserve la place du bouton de thème */
    .top-nav__inner { padding: 0 12px; gap: 8px; }
    .top-nav__links { gap: 6px; min-width: 0; }
    .nav-logo-mark { height: 38px; padding: 0 10px; gap: 6px; font-size: 14px; }
    .top-nav__actions { flex-shrink: 0; }

    .s-tabs {
        flex-direction: row;
        overflow-x: auto;
        gap: 2px;
        padding-bottom: 0;
        margin: 0 -16px;
        padding: 4px 12px 0;
        scrollbar-width: none;
        border-top: 1px solid var(--c-border);
        /* Fondu à droite : signale que la barre défile ; le padding laisse le dernier onglet sortir du fondu */
        padding-right: 40px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }
    .s-tabs::-webkit-scrollbar { display: none; }

    .s-tab {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 12px;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        background: none !important;
        font-size: .75rem;
    }
    .s-tab svg { display: none; }
    .s-tab--active {
        border-bottom-color: var(--c-accent);
        color: var(--c-accent);
    }

    .main-content { padding: 28px 16px 60px; }

    .exp-detail__head { flex-direction: column; }
    .exp-detail__info { align-items: flex-start; flex-direction: row; gap: 14px; }

    .exp-list-item { flex-direction: column; gap: 4px; }
}

/* Très petits écrans : onglets du haut en icônes seules (libellé conservé pour les lecteurs d'écran) */
@media (max-width: 419px) {
    .nav-logo-mark span {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .nav-logo-mark { width: 42px; padding: 0; }
}

/* Back to top floating button */
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 50;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-mid);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s, background .15s, color .15s, border-color .15s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover, .back-to-top:focus-visible {
    background: var(--c-surface);
    color: var(--c-dark);
    border-color: var(--c-mid);
}

/* =============================================================
   PRINT
   ============================================================= */
@media print {
    .top-nav, .sidebar { display: none !important; }
    .page-layout { display: block; padding-top: 0; }
    .main-content { padding: 24px; max-width: 100%; }
    .back-to-top { display: none !important; }
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Lien discret vers l'administration : la photo garde son apparence */
.s-photo-link { display: block; cursor: default; }
.s-photo { display: block; object-fit: cover; object-position: center 15%; }

/* ===================== WIKI ===================== */
.wiki-soustitre { color: var(--c-muted); font-size: .85rem; font-style: italic; margin: -.25rem 0 .75rem; }
.wiki-intro { color: var(--c-mid); margin: 0 0 2rem; }
.wiki-vide { color: var(--c-muted); font-style: italic; }
.wiki-section { margin-bottom: 2.5rem; }
.wiki-section__titre { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin: 0 0 .25rem; }
.wiki-section__titre a { color: var(--c-dark); text-decoration: none; }
.wiki-section__titre a:hover, .wiki-section__titre a:focus-visible { text-decoration: underline; }
.wiki-section__desc { color: var(--c-muted); font-size: .9rem; margin: 0 0 .75rem; }
.wiki-count { font-size: .75rem; color: var(--c-chip-ink); background: var(--c-chip-bg); border: 1px solid var(--c-chip-bdr); border-radius: 999px; padding: 0 .5rem; }
.wiki-liste { list-style: none; margin: 0; padding: 0; }
.wiki-liste__item { padding: .85rem 0; border-bottom: 1px solid var(--c-border); }
.wiki-liste__item:last-child { border-bottom: none; }
.wiki-liste__lien { font-weight: 600; color: var(--c-dark); text-decoration: none; }
.wiki-liste__lien:hover, .wiki-liste__lien:focus-visible { text-decoration: underline; }
.wiki-liste__resume { margin: .25rem 0 0; color: var(--c-mid); font-size: .92rem; }
.wiki-meta { margin: .25rem 0 0; color: var(--c-faint); font-size: .8rem; }

.wiki-article__titre { font-size: 1.6rem; line-height: 1.25; margin: 1rem 0 .25rem; }
.wiki-prose { margin-top: 1.5rem; line-height: 1.7; overflow-wrap: break-word; }
.wiki-prose h1, .wiki-prose h2, .wiki-prose h3, .wiki-prose h4 { line-height: 1.3; margin: 2rem 0 .75rem; }
.wiki-prose h1 { font-size: 1.4rem; }
.wiki-prose h2 { font-size: 1.25rem; }
.wiki-prose h3 { font-size: 1.1rem; }
.wiki-prose p, .wiki-prose ul, .wiki-prose ol { margin: 0 0 1rem; }
.wiki-prose a { color: var(--c-accent); text-decoration: underline; }
.wiki-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--c-chip-bg); border: 1px solid var(--c-chip-bdr); border-radius: 4px; padding: .1em .35em; }
.wiki-prose pre { margin: 0 0 1.25rem; border-radius: 8px; overflow-x: auto; background: #0d1117; }
.wiki-prose pre code { display: block; padding: 1rem 1.1rem; background: none; border: none; font-size: .85rem; line-height: 1.55; color: #e6edf3; }
.wiki-prose blockquote { margin: 0 0 1rem; padding: .25rem 1rem; border-left: 3px solid var(--c-border); color: var(--c-mid); }
.wiki-prose table { border-collapse: collapse; margin: 0 0 1rem; display: block; overflow-x: auto; }
.wiki-prose th, .wiki-prose td { border: 1px solid var(--c-border); padding: .4rem .7rem; text-align: left; }
.wiki-prose img { max-width: 100%; height: auto; }

/* Mentions légales : lien discret (sidebar sur grand écran, pied de page sur mobile) */
.s-legal { color: var(--c-muted); font-size: .75rem; text-decoration: none; margin-top: 4px; }
.s-legal:hover, .s-legal:focus-visible { color: var(--c-accent); text-decoration: underline; }
.site-footer { display: none; text-align: center; padding: 20px 16px 28px; border-top: 1px solid var(--c-border); }
.site-footer a { color: var(--c-muted); font-size: .8rem; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--c-accent); text-decoration: underline; }
@media (max-width: 680px) {
    .s-legal { display: none; }
    .site-footer { display: block; }
}
@media print { .site-footer { display: none !important; } }

.mentions__section { margin: 0 0 2rem; }
.mentions__section h2, .mentions__section h3 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--c-dark); }
.mentions__section p, .mentions__section li { color: var(--c-mid); line-height: 1.6; }
.mentions__section a { color: var(--c-accent); }
.mentions__maj { margin: 2.5rem 0 0; font-size: .8rem; color: var(--c-muted); }

/* Wiki : filtres, cartes et bulle de résumé */
.wiki-filtres { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.75rem; }
.wiki-filtres__champ { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 14rem; max-width: 22rem; }
.wiki-filtres label { font-size: .8rem; color: var(--c-muted); }
.wiki-filtres input, .wiki-filtres select { font: inherit; font-size: .92rem; color: var(--c-dark); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: .5rem .7rem; }
.wiki-filtres input:focus-visible, .wiki-filtres select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.wiki-cartes { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.wiki-carte[hidden], .wiki-section[hidden], .wiki-vide[hidden] { display: none; }
.wiki-carte { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; transition: border-color .15s, transform .15s; }
.wiki-carte:hover, .wiki-carte:focus-within { border-color: var(--c-accent); transform: translateY(-2px); }
.wiki-carte__lien { display: block; padding: 1rem; font-weight: 600; color: var(--c-dark); text-decoration: none; overflow-wrap: anywhere; }
.wiki-carte__lien:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 10px; }
.wiki-bulle { position: absolute; z-index: 50; max-width: min(22rem, calc(100vw - 16px)); padding: .65rem .85rem; background: var(--c-dark); color: var(--c-bg); border-radius: 8px; font-size: .88rem; line-height: 1.45; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; }
.wiki-bulle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wiki-carte { transition: none; transform: none !important; } }

/* Wiki : une teinte par rubrique (bordures et fonds légers uniquement, le texte garde ses couleurs AA). */
.wiki-section { --teinte: var(--c-accent); }
.wiki-section[data-teinte="0"] { --teinte: #6b7fd7; }
.wiki-section[data-teinte="1"] { --teinte: #1f9aa0; }
.wiki-section[data-teinte="2"] { --teinte: #d09224; }
.wiki-section[data-teinte="3"] { --teinte: #cc5c85; }
.wiki-section[data-teinte="4"] { --teinte: #45a064; }
.wiki-section[data-teinte="5"] { --teinte: #9a65d0; }
.wiki-section__titre { padding-left: .65rem; border-left: 4px solid var(--teinte, var(--c-accent)); }
.wiki-section .wiki-count { background: color-mix(in srgb, var(--teinte) 16%, var(--c-surface)); border-color: color-mix(in srgb, var(--teinte) 55%, transparent); color: var(--c-dark); }
.wiki-carte { border-top: 3px solid var(--teinte, var(--c-accent)); background: linear-gradient(180deg, color-mix(in srgb, var(--teinte, var(--c-accent)) 9%, var(--c-surface)), var(--c-surface)); }
.wiki-carte:hover, .wiki-carte:focus-within { border-color: var(--teinte, var(--c-accent)); }
.wiki-filtres input:focus-visible, .wiki-filtres select:focus-visible { border-color: var(--c-accent); }
.wiki-article__titre { border-left: 4px solid var(--c-accent); padding-left: .75rem; }
.wiki-prose h2 { padding-bottom: .25rem; border-bottom: 2px solid var(--c-accent-bdr); }
.wiki-prose blockquote { border-left-color: var(--c-accent); background: var(--c-accent-bg); border-radius: 0 6px 6px 0; }
.wiki-carte__meta { margin: 0; padding: 0 1rem 1rem; }
.wiki-carte__lien:has(+ .wiki-carte__meta) { padding-bottom: .25rem; }

/* Fil d'Ariane (wiki et veille) */
.fil-ariane { margin: 0 0 28px; font-size: .77rem; color: var(--c-muted); }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fil-ariane li + li::before { content: "›" / ""; margin-right: 8px; }
.fil-ariane a { color: var(--c-muted); transition: color .15s; }
.fil-ariane a:hover, .fil-ariane a:focus-visible { color: var(--c-accent); }
.fil-ariane [aria-current="page"] { color: var(--c-dark); }

/* Avis sur un article du wiki : note, suggestions, réponses */
.wiki-avis { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); }
.wiki-avis__titre { font-size: 1.25rem; margin: 0 0 .75rem; }
.wiki-avis__sous-titre { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.wiki-avis__moyenne { margin: 0 0 1rem; }
.wiki-avis__etoiles { color: var(--c-accent); letter-spacing: .1em; margin-right: .35rem; }
.wiki-avis__message { margin: 0 0 1rem; padding: .5rem .75rem; border-radius: 6px; background: var(--c-green-bg); color: var(--c-dark); border: 1px solid var(--c-green); }
.wiki-avis__message--erreur { background: var(--c-surface); border-color: var(--c-border); border-left: 4px solid var(--c-accent); }
.wiki-avis__form { display: grid; gap: .75rem; max-width: 36rem; }
.wiki-avis__note { border: 1px solid var(--c-border); border-radius: 6px; padding: .5rem .75rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.wiki-avis__note label { white-space: nowrap; }
.wiki-avis__champ { display: grid; gap: .25rem; font-size: .9rem; color: var(--c-mid); }
.wiki-avis__champ textarea, .wiki-avis__champ input { font: inherit; padding: .5rem; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-bg); color: var(--c-dark); }
.wiki-avis__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wiki-avis__envoyer { justify-self: start; font: inherit; padding: .5rem 1rem; border: 0; border-radius: 6px; background: var(--c-accent); color: var(--c-accent-ink); cursor: pointer; }
.wiki-avis__envoyer:hover, .wiki-avis__envoyer:focus-visible { filter: brightness(1.15); }
.wiki-avis__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.wiki-avis__item { padding: .75rem 1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px; overflow-wrap: break-word; }
.wiki-avis__item p { margin: .25rem 0; }
.wiki-avis__reponse { margin-top: .5rem; padding-left: .75rem; border-left: 3px solid var(--c-accent); }