:root {
    color-scheme: light;
    --background: #f5f7fb;
    --surface: #ffffff;
    --surface-hover: #f9fafb;
    --text: #172033;
    --muted: #667085;
    --border: #e4e7ec;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #16a34a;
    --shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    --radius: 18px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #080d17;
    --surface: #111a29;
    --surface-hover: #182437;
    --text: #edf3fc;
    --muted: #9aabc1;
    --border: #29374d;
    --primary: #60a5fa;
    --primary-hover: #93c5fd;
    --success: #4ade80;
    --shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at top left,
            rgba(37, 99, 235, 0.12),
            transparent 32rem),
        var(--background);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.container {
    width: min(1120px, calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(228, 231, 236, 0.8);
    background: rgba(245, 247, 251, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.site-header__inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header__controls {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 800;
}

.brand__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand__icon img {
    display: block;
    object-fit: contain;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.site-nav a:hover {
    color: var(--primary);
}

.theme-toggle {
    min-height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    background: var(--surface);
    font: 700 .76rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: rgba(96, 165, 250, .48);
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .28);
    outline-offset: 2px;
}

.theme-toggle__prompt {
    color: var(--success);
    font-weight: 900;
}

.theme-toggle__icon {
    width: 1.1em;
    font-size: 1rem;
    text-align: center;
}

.dev-status {
    border-bottom: 1px solid rgba(37, 99, 235, .12);
    color: #718096;
    background: rgba(15, 23, 42, .035);
    font-size: .72rem;
}

.dev-status__inner {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

.dev-status__inner::-webkit-scrollbar {
    display: none;
}

.dev-status code {
    flex: 0 0 auto;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.dev-status__online {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #15803d;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 750;
}

.dev-status__online i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .11);
}

main {
    min-height: calc(100vh - 144px);
}

.site-footer {
    padding: 28px 0;
    color: var(--muted);
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-runtime {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
}

.footer-profiles {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.footer-profiles a {
    color: var(--text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, .28);
    text-underline-offset: 4px;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}

.footer-profiles a:hover {
    color: var(--primary);
    text-decoration-color: currentColor;
}

.section {
    position: relative;
    overflow: hidden;
    overflow: clip;
    padding: 90px 0;
}

.section--muted {
    border-block: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.5);
}

.section__heading {
    max-width: 700px;
    margin-bottom: 40px;
}

.section__label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.section__label::before {
    content: "// ";
    color: #94a3b8;
}

.section__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.section__description {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Hero */

.hero {
    position: relative;
    overflow: hidden;
    padding: 22px 0 80px;
}

.hero::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.1);
    filter: blur(10px);
    pointer-events: none;
    animation: hero-glow 8s ease-in-out infinite alternate;
}

@keyframes hero-glow {
    to {
        transform: translate3d(-70px, 45px, 0) scale(1.12);
    }
}

.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    gap: 70px;
    align-items: center;
}

.hero__signature {
    margin: 0 0 17px;
    color: #64748b;
    font: 700 .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.hero__signature span {
    color: #7c3aed;
}

.hero__signature--close {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 1rem;
}

.hero__availability {
    --availability-rgb: 22, 163, 74;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 8px 13px;
    border: 1px solid rgba(var(--availability-rgb), 0.2);
    border-radius: 999px;
    color: rgb(var(--availability-rgb));
    background: rgba(var(--availability-rgb), 0.08);
    font-size: 0.86rem;
    font-weight: 750;
}

.hero__availability::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(var(--availability-rgb), 0.13);
}

.hero__availability--available {
    --availability-rgb: 22, 163, 74;
}

.hero__availability--busy {
    --availability-rgb: 217, 119, 6;
}

.hero__availability--unavailable {
    --availability-rgb: 220, 38, 38;
}

.hero__profile-column {
    min-width: 0;
}

.hero__profile-column .hero__availability {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    margin: 0;
}

.hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(3rem, 8vw, 6.2rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.hero h1 span {
    color: var(--primary);
}

.hero__description {
    max-width: 680px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.75;
}

.hero__seo-summary {
    max-width: 680px;
    margin: 16px 0 0;
    padding: 14px 16px;
    color: #475569;
    border-left: 3px solid rgba(37, 99, 235, .7);
    border-radius: 0 10px 10px 0;
    background: rgba(37, 99, 235, .045);
    font-size: .94rem;
    line-height: 1.65;
}

.hero__seo-summary code {
    margin-right: 6px;
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .82em;
    font-weight: 750;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-weight: 750;
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button--primary {
    color: #ffffff;
    background: var(--primary);
}

.button--primary:hover {
    background: var(--primary-hover);
}

.button--secondary {
    border-color: var(--border);
    background: var(--surface);
}

.button--secondary:hover {
    border-color: #cbd5e1;
    background: var(--surface-hover);
}

.hero__card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.hero__avatar {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 26px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.hero__avatar img {
    width: auto;
    height: 96px;
    border-radius: 10px;
}

.hero__card h2 {
    margin: 0 0 7px;
    font-size: 1.35rem;
}

.hero__card>p {
    margin: 0;
    color: var(--muted);
}

.hero__details {
    display: grid;
    gap: 13px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.hero__detail {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 0.92rem;
}

.hero__detail span {
    color: var(--muted);
}

.hero__profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 22px;
}

.hero__profiles a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 7px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(248, 250, 252, .8);
    font-size: .78rem;
    font-weight: 750;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.hero__profiles a:hover {
    color: var(--primary);
    border-color: rgba(37, 99, 235, .35);
    background: rgba(37, 99, 235, .06);
    transform: translateY(-2px);
}

.hero__profiles a span {
    font-size: .9em;
}

/* À propos */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 60px;
    align-items: start;
}

.about-text {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.85;
}

.about-text p {
    margin: 0 0 20px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.stat-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.stat-card strong {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 1.8rem;
}

.stat-card span {
    color: var(--muted);
    font-size: 0.9rem;
}

/* Compétences */

.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.skill-card {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.skill-card__code {
    display: block;
    margin: -4px 0 18px;
    overflow: hidden;
    color: #7c3aed;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-card__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 14px;
    color: var(--primary);
    background: rgba(37, 99, 235, 0.1);
    font-weight: 900;
}

.skill-card h3 {
    margin: 0 0 12px;
    font-size: 1.2rem;
}

.skill-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.tag {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface-hover);
    font-size: 0.78rem;
    font-weight: 700;
}

.project-card .tag,
.skill-card .tag {
    border-color: transparent;
}

.project-card .tag:nth-child(6n + 1),
.skill-card .tag:nth-child(6n + 1) {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #dbeafe;
}

.project-card .tag:nth-child(6n + 2),
.skill-card .tag:nth-child(6n + 2) {
    color: #6d28d9;
    border-color: #ddd6fe;
    background: #ede9fe;
}

.project-card .tag:nth-child(6n + 3),
.skill-card .tag:nth-child(6n + 3) {
    color: #15803d;
    border-color: #bbf7d0;
    background: #dcfce7;
}

.project-card .tag:nth-child(6n + 4),
.skill-card .tag:nth-child(6n + 4) {
    color: #b45309;
    border-color: #fde68a;
    background: #fef3c7;
}

.project-card .tag:nth-child(6n + 5),
.skill-card .tag:nth-child(6n + 5) {
    color: #be123c;
    border-color: #fecdd3;
    background: #ffe4e6;
}

.project-card .tag:nth-child(6n),
.skill-card .tag:nth-child(6n) {
    color: #0e7490;
    border-color: #a5f3fc;
    background: #cffafe;
}

.skill-card .tags .tag[data-tag-tone="blue"],
.project-card .tags .tag[data-tag-tone="blue"] {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #dbeafe;
}

.skill-card .tags .tag[data-tag-tone="violet"],
.project-card .tags .tag[data-tag-tone="violet"] {
    color: #6d28d9;
    border-color: #ddd6fe;
    background: #ede9fe;
}

.skill-card .tags .tag[data-tag-tone="green"],
.project-card .tags .tag[data-tag-tone="green"] {
    color: #15803d;
    border-color: #bbf7d0;
    background: #dcfce7;
}

.skill-card .tags .tag[data-tag-tone="amber"],
.project-card .tags .tag[data-tag-tone="amber"] {
    color: #b45309;
    border-color: #fde68a;
    background: #fef3c7;
}

.skill-card .tags .tag[data-tag-tone="rose"],
.project-card .tags .tag[data-tag-tone="rose"] {
    color: #be123c;
    border-color: #fecdd3;
    background: #ffe4e6;
}

.skill-card .tags .tag[data-tag-tone="cyan"],
.project-card .tags .tag[data-tag-tone="cyan"] {
    color: #0e7490;
    border-color: #a5f3fc;
    background: #cffafe;
}

.skill-card .tags .tag[data-tag-tone="indigo"],
.project-card .tags .tag[data-tag-tone="indigo"] {
    color: #4338ca;
    border-color: #c7d2fe;
    background: #e0e7ff;
}

.skill-card .tags .tag[data-tag-tone="teal"],
.project-card .tags .tag[data-tag-tone="teal"] {
    color: #0f766e;
    border-color: #99f6e4;
    background: #ccfbf1;
}

.skill-card .tags .tag[data-tag-tone="lime"],
.project-card .tags .tag[data-tag-tone="lime"] {
    color: #4d7c0f;
    border-color: #d9f99d;
    background: #ecfccb;
}

.skill-card .tags .tag[data-tag-tone="orange"],
.project-card .tags .tag[data-tag-tone="orange"] {
    color: #c2410c;
    border-color: #fed7aa;
    background: #ffedd5;
}

.skill-card .tags .tag[data-tag-tone="red"],
.project-card .tags .tag[data-tag-tone="red"] {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fee2e2;
}

.skill-card .tags .tag[data-tag-tone="pink"],
.project-card .tags .tag[data-tag-tone="pink"] {
    color: #be185d;
    border-color: #fbcfe8;
    background: #fce7f3;
}

.skill-card .tags .tag[data-tag-tone="fuchsia"],
.project-card .tags .tag[data-tag-tone="fuchsia"] {
    color: #a21caf;
    border-color: #f5d0fe;
    background: #fae8ff;
}

.skill-card .tags .tag[data-tag-tone="sky"],
.project-card .tags .tag[data-tag-tone="sky"] {
    color: #0369a1;
    border-color: #bae6fd;
    background: #e0f2fe;
}

.skill-card .tags .tag[data-tag-tone="emerald"],
.project-card .tags .tag[data-tag-tone="emerald"] {
    color: #047857;
    border-color: #a7f3d0;
    background: #d1fae5;
}

.skill-card .tags .tag[data-tag-tone="slate"],
.project-card .tags .tag[data-tag-tone="slate"] {
    color: #475569;
    border-color: #cbd5e1;
    background: #e2e8f0;
}

.skill-card .tags .tag[data-tag-tone="purple"],
.project-card .tags .tag[data-tag-tone="purple"] {
    color: #7e22ce;
    border-color: #e9d5ff;
    background: #f3e8ff;
}

.skill-card .tags .tag[data-tag-tone="yellow"],
.project-card .tags .tag[data-tag-tone="yellow"] {
    color: #a16207;
    border-color: #fef08a;
    background: #fef9c3;
}

.skill-card .tags .tag[data-tag-tone="stone"],
.project-card .tags .tag[data-tag-tone="stone"] {
    color: #57534e;
    border-color: #d6d3d1;
    background: #e7e5e4;
}

.skill-card .tags .tag[data-tag-tone="navy"],
.project-card .tags .tag[data-tag-tone="navy"] {
    color: #1e3a8a;
    border-color: #bfdbfe;
    background: #dbeafe;
}

.skill-card .tags .tag[data-tag-tone="mint"],
.project-card .tags .tag[data-tag-tone="mint"] {
    color: #0f766e;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.skill-card .tags .tag[data-tag-tone="forest"],
.project-card .tags .tag[data-tag-tone="forest"] {
    color: #14532d;
    border-color: #86efac;
    background: #dcfce7;
}

.skill-card .tags .tag[data-tag-tone="olive"],
.project-card .tags .tag[data-tag-tone="olive"] {
    color: #4d5f0a;
    border-color: #cfe58a;
    background: #f1f7d6;
}

.skill-card .tags .tag[data-tag-tone="mustard"],
.project-card .tags .tag[data-tag-tone="mustard"] {
    color: #854d0e;
    border-color: #f3d46b;
    background: #fff4c2;
}

.skill-card .tags .tag[data-tag-tone="copper"],
.project-card .tags .tag[data-tag-tone="copper"] {
    color: #9a3412;
    border-color: #e8a77f;
    background: #f8e1d2;
}

.skill-card .tags .tag[data-tag-tone="coral"],
.project-card .tags .tag[data-tag-tone="coral"] {
    color: #b9382e;
    border-color: #fec5bb;
    background: #ffebe7;
}

.skill-card .tags .tag[data-tag-tone="ruby"],
.project-card .tags .tag[data-tag-tone="ruby"] {
    color: #9f1239;
    border-color: #fda4af;
    background: #ffe4e6;
}

.skill-card .tags .tag[data-tag-tone="burgundy"],
.project-card .tags .tag[data-tag-tone="burgundy"] {
    color: #701a3d;
    border-color: #efb1cf;
    background: #fce7f3;
}

.skill-card .tags .tag[data-tag-tone="lavender"],
.project-card .tags .tag[data-tag-tone="lavender"] {
    color: #6b46a1;
    border-color: #d8b4fe;
    background: #f5edff;
}

.skill-card .tags .tag[data-tag-tone="orchid"],
.project-card .tags .tag[data-tag-tone="orchid"] {
    color: #86198f;
    border-color: #e9a8ef;
    background: #fcecff;
}

.skill-card .tags .tag[data-tag-tone="cobalt"],
.project-card .tags .tag[data-tag-tone="cobalt"] {
    color: #1e40af;
    border-color: #93c5fd;
    background: #dbeafe;
}

.skill-card .tags .tag[data-tag-tone="graphite"],
.project-card .tags .tag[data-tag-tone="graphite"] {
    color: #374151;
    border-color: #cbd5e1;
    background: #e5e7eb;
}

/* Projets */

.content-carousel {
    --carousel-focus: var(--primary);
    --carousel-track: rgba(37, 99, 235, .1);
    --carousel-track-hover: rgba(37, 99, 235, .16);
    --carousel-track-border: rgba(37, 99, 235, .2);
    --carousel-scrollbar: var(--primary);
    --carousel-scrollbar-hover: var(--primary-hover);
    --carousel-thumb: var(--primary);
    --carousel-thumb-hover: var(--primary-hover);
    --carousel-thumb-shadow: rgba(37, 99, 235, .22);
    --carousel-thumb-shadow-hover: rgba(37, 99, 235, .42);
    position: relative;
    min-width: 0;
}

.content-carousel__track {
    display: grid;
    grid-auto-flow: column;
    align-items: stretch;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 4px 2px 20px;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--carousel-scrollbar) var(--carousel-track);
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: touch;
}

.projects-grid {
    grid-auto-columns: calc((100% - 48px) / 3);
    gap: 24px;
}

.content-carousel__track:focus-visible {
    outline: 2px solid var(--carousel-focus);
    outline-offset: 6px;
}

.content-carousel__track::-webkit-scrollbar {
    height: 14px;
}

.content-carousel__track::-webkit-scrollbar-track {
    border: 1px solid var(--carousel-track-border);
    border-radius: 999px;
    background: var(--carousel-track);
}

.content-carousel__track::-webkit-scrollbar-thumb {
    min-width: 64px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--carousel-thumb);
    background-clip: padding-box;
    box-shadow: 0 0 9px var(--carousel-thumb-shadow);
}

@media (hover: hover) {
    .content-carousel:hover .content-carousel__track,
    .content-carousel__track:focus-visible {
        scrollbar-color: var(--carousel-scrollbar-hover) var(--carousel-track-hover);
    }

    .content-carousel:hover .content-carousel__track::-webkit-scrollbar-track,
    .content-carousel__track:focus-visible::-webkit-scrollbar-track {
        background: var(--carousel-track-hover);
    }

    .content-carousel:hover .content-carousel__track::-webkit-scrollbar-thumb,
    .content-carousel__track:focus-visible::-webkit-scrollbar-thumb {
        background: var(--carousel-thumb-hover);
        background-clip: padding-box;
        box-shadow: 0 0 14px var(--carousel-thumb-shadow-hover);
    }
}

.content-carousel__scrollbar {
    position: relative;
    width: 100%;
    height: 16px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--carousel-track-border);
    border-radius: 999px;
    background: var(--carousel-track);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .1);
    cursor: pointer;
    touch-action: none;
}

.content-carousel__scrollbar[hidden] {
    display: none;
}

.content-carousel__scrollbar:focus-visible {
    outline: 2px solid var(--carousel-focus);
    outline-offset: 4px;
}

.content-carousel__scrollbar span {
    position: absolute;
    inset: 0 auto 0 0;
    min-width: 64px;
    border: 2px solid transparent;
    border-radius: inherit;
    background: var(--carousel-thumb);
    background-clip: padding-box;
    box-shadow: 0 0 9px var(--carousel-thumb-shadow);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    will-change: width, transform;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.content-carousel__scrollbar:hover span,
.content-carousel__scrollbar:focus-visible span {
    background: var(--carousel-thumb-hover);
    box-shadow: 0 0 14px var(--carousel-thumb-shadow-hover);
}

.content-carousel__scrollbar.is-dragging span {
    cursor: grabbing;
}

.js-enabled .content-carousel__track {
    scrollbar-width: none;
}

.js-enabled .content-carousel__track::-webkit-scrollbar {
    display: none;
}

.js-enabled .content-carousel__track.is-custom-scrollbar-ready {
    padding-bottom: 4px;
}

.content-carousel__track.is-scrollbar-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

.content-carousel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.content-carousel__hint {
    color: var(--muted);
    font: 650 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.content-carousel__count {
    padding: 7px 11px;
    border: 1px solid var(--carousel-track-border);
    border-radius: 999px;
    color: var(--primary);
    background: var(--carousel-track);
    font-size: .76rem;
    font-weight: 750;
}

.project-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.project-card:hover {
    transform: translateY(-7px);
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.14);
}

.project-card__file {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    color: #8190a5;
    background: #111b29;
    font: 650 .68rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.project-card__file > span {
    display: inline-flex;
    gap: 4px;
}

.project-card__file i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fb5f57;
}

.project-card__file i:nth-child(2) {
    background: #fbbd2e;
}

.project-card__file i:nth-child(3) {
    background: #28c840;
}

.project-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eef2ff;
}

.project-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: var(--surface);
    transition: transform 350ms ease;
}

.project-card:hover img {
    transform: scale(1);
}

.project-card__status {
    --project-status-rgb: 22, 163, 74;
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(var(--project-status-rgb), 0.92);
    font-size: 0.76rem;
    font-weight: 750;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.project-card__status--online {
    --project-status-rgb: 22, 163, 74;
}

.project-card__status--development {
    --project-status-rgb: 37, 99, 235;
}

.project-card__status--maintenance {
    --project-status-rgb: 217, 119, 6;
}

.project-card__status--offline {
    --project-status-rgb: 220, 38, 38;
}

.project-card__status--github {
    --project-status-rgb: 100, 116, 139;
}

.project-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 23px;
}

.project-card h3 {
    margin: 0 0 10px;
    font-size: 1.35rem;
}

.project-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.project-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 24px;
    color: var(--primary);
    font-weight: 750;
}

.project-card__arrow {
    font-size: 1.3rem;
    transition: transform 180ms ease;
}

.project-card:hover .project-card__arrow {
    transform: translateX(5px);
}

/* Méthode */

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    counter-reset: process;
}

.process-card {
    counter-increment: process;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.process-card::before {
    content: "0" counter(process);
    display: block;
    margin-bottom: 24px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 900;
}

.process-card__function {
    display: block;
    margin: -15px 0 15px;
    color: #7c3aed;
    font-size: .68rem;
}

.process-card h3 {
    margin: 0 0 10px;
}

.process-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

/* Contact */

.contact-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: 40px;
    align-items: center;
    padding: 45px;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient(135deg, #172033, #2563eb);
    box-shadow: 0 28px 65px rgba(15, 23, 42, 0.2);
}

.contact-card::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.contact-card__content {
    position: relative;
    z-index: 1;
}

.contact-card h2 {
    max-width: 700px;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.contact-card p {
    max-width: 660px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
}

.contact-card .button {
    position: relative;
    z-index: 1;
    color: var(--text);
    background: #ffffff;
}

@media (max-width: 980px) {

    .hero__grid,
    .about-grid {
        grid-template-columns: 1fr;
    }

    .hero__profile-column,
    .hero__card {
        max-width: 520px;
    }

    .hero__profile-column {
        display: grid;
        gap: 14px;
    }

    .hero__profile-column .hero__availability {
        position: static;
        justify-self: start;
    }

    .skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .section {
        padding: 65px 0;
    }

    .hero {
        padding: 30px 0 65px;
    }

    .skills-grid,
    .process-grid,
    .about-stats {
        grid-template-columns: 1fr;
    }

    .contact-card {
        grid-template-columns: 1fr;
        padding: 30px;
    }
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-brand img {
    display: block;
    object-fit: contain;
}

/* Animations d'entrée */

.js-enabled .reveal {
    opacity: 0;
    filter: blur(0);
    transition:
        opacity 820ms cubic-bezier(.2, .75, .3, 1),
        transform 820ms cubic-bezier(.2, .75, .3, 1),
        filter 820ms cubic-bezier(.2, .75, .3, 1),
        clip-path 950ms cubic-bezier(.2, .75, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js-enabled .reveal[data-reveal="slide-up"] {
    transform: translateY(34px);
}

.js-enabled .reveal[data-reveal="slide-right"] {
    transform: translateX(-42px);
}

.js-enabled .reveal[data-reveal="slide-left"] {
    transform: translateX(42px);
}

.js-enabled .reveal[data-reveal="blur"] {
    filter: blur(12px);
    transform: translateY(18px);
}

.js-enabled .reveal[data-reveal="pop"],
.js-enabled .reveal[data-reveal="scale"] {
    transform: translateY(24px) scale(.88);
}

.js-enabled .reveal[data-reveal="tilt"] {
    transform: translateY(38px) rotate(2.5deg) scale(.94);
}

.js-enabled .reveal[data-reveal="clip"] {
    -webkit-clip-path: inset(0 100% 0 0 round var(--radius));
    clip-path: inset(0 100% 0 0 round var(--radius));
    transform: translateY(20px);
}

.js-enabled .reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    -webkit-clip-path: inset(0 0 0 0 round var(--radius));
    clip-path: inset(0 0 0 0 round var(--radius));
    transform: translate(0) scale(1);
}

@supports not (clip-path: inset(0 0 0 0)) {
    .js-enabled .reveal[data-reveal="clip"] {
        -webkit-clip-path: none;
        clip-path: none;
    }
}

.typewriter {
    width: 100%;
    display: grid;
    line-height: 1.02;
}

.typewriter__text,
.typewriter__measure {
    grid-area: 1 / 1;
}

.typewriter__measure {
    display: grid;
    visibility: hidden;
    pointer-events: none;
}

.typewriter__measure span {
    grid-area: 1 / 1;
}

.typewriter__text::after {
    content: "";
    width: .08em;
    height: .8em;
    display: inline-block;
    margin-left: .08em;
    background: currentColor;
    animation: caret-blink 850ms steps(1) infinite;
}

@keyframes caret-blink {
    50% { opacity: 0; }
}

.motion-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    box-shadow: 0 0 14px rgba(37, 99, 235, .4);
}

.section-motion .section__label::after {
    content: "";
    width: 34px;
    height: 2px;
    display: inline-block;
    margin: 0 0 .2em 10px;
    transform: scaleX(0);
    transform-origin: left;
    background: currentColor;
    transition: transform 650ms cubic-bezier(.2, .75, .3, 1) 220ms;
}

.section-motion.is-in-view .section__label::after {
    transform: scaleX(1);
}

.js-enabled .skill-card .skill-card__icon {
    opacity: 0;
    transform: translateY(8px) rotate(-10deg) scale(.7);
}

.js-enabled .skill-card.is-visible .skill-card__icon {
    animation: icon-enter 560ms cubic-bezier(.2, .9, .25, 1.25) calc(var(--reveal-delay, 0ms) + 260ms) both;
}

.js-enabled .skill-card .tag {
    opacity: 0;
    transform: translateY(8px);
}

.js-enabled .skill-card.is-visible .tag {
    animation: tag-enter 420ms ease calc(var(--reveal-delay, 0ms) + 360ms) both;
}

.js-enabled .skill-card.is-visible .tag:nth-child(2) {
    animation-delay: calc(var(--reveal-delay, 0ms) + 420ms);
}

.js-enabled .skill-card.is-visible .tag:nth-child(3) {
    animation-delay: calc(var(--reveal-delay, 0ms) + 480ms);
}

.js-enabled .skill-card.is-visible .tag:nth-child(n + 4) {
    animation-delay: calc(var(--reveal-delay, 0ms) + 540ms);
}

.js-enabled .project-card .project-card__image img {
    transform: scale(1.12);
    transition: transform 1.1s cubic-bezier(.2, .75, .3, 1);
}

.js-enabled .project-card.is-visible .project-card__image img {
    transform: scale(1);
}

.js-enabled .project-card.is-visible:hover .project-card__image img {
    transform: scale(1);
}

.js-enabled .process-card::before {
    opacity: 0;
    transform: translateX(-12px) rotate(-8deg) scale(.7);
    transition:
        opacity 500ms ease calc(var(--reveal-delay, 0ms) + 260ms),
        transform 500ms cubic-bezier(.2, .9, .25, 1.2) calc(var(--reveal-delay, 0ms) + 260ms);
}

.js-enabled .process-card.is-visible::before {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
}

.js-enabled .testimonial-card .testimonial-card__stars span {
    opacity: 0;
    display: inline-block;
    transform: translateY(8px) scale(.5);
}

.js-enabled .testimonial-card.is-visible .testimonial-card__stars span {
    animation: star-enter 400ms cubic-bezier(.2, .9, .25, 1.25) calc(var(--reveal-delay, 0ms) + 280ms) both;
}

.js-enabled .testimonial-card.is-visible .testimonial-card__stars span:nth-child(2) {
    animation-delay: calc(var(--reveal-delay, 0ms) + 340ms);
}

.js-enabled .testimonial-card.is-visible .testimonial-card__stars span:nth-child(3) {
    animation-delay: calc(var(--reveal-delay, 0ms) + 400ms);
}

.js-enabled .testimonial-card.is-visible .testimonial-card__stars span:nth-child(4) {
    animation-delay: calc(var(--reveal-delay, 0ms) + 460ms);
}

.js-enabled .testimonial-card.is-visible .testimonial-card__stars span:nth-child(5) {
    animation-delay: calc(var(--reveal-delay, 0ms) + 520ms);
}

.hero__availability::before {
    animation: availability-pulse 2.2s ease-out infinite;
}

@keyframes availability-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(var(--availability-rgb), .13);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(var(--availability-rgb), 0);
    }
}

@keyframes icon-enter {
    to {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
}

@keyframes tag-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes star-enter {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero__content {
    min-width: 0;
}

.hero__card {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero__card:hover {
    transform: translateY(-5px) rotate(.35deg);
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.13);
}

.about-text {
    white-space: pre-line;
}

.project-card__image--placeholder {
    display: grid;
    place-items: center;
    color: rgba(37, 99, 235, .22);
    background:
        radial-gradient(circle at 75% 25%, rgba(124, 58, 237, .22), transparent 35%),
        linear-gradient(135deg, #eaf0ff, #f7f4ff);
    font-size: 7rem;
    font-weight: 900;
}

.empty-state {
    color: var(--muted);
}

/* Avis clients */

.testimonials {
    --testimonials-label: #2563eb;
    --testimonials-title: #172033;
    --testimonials-focus: #2563eb;
    --testimonials-track: rgba(148, 163, 184, .24);
    --testimonials-track-hover: rgba(148, 163, 184, .34);
    --testimonials-track-border: rgba(37, 99, 235, .18);
    --testimonials-scrollbar: #2563eb;
    --testimonials-scrollbar-hover: #0891b2;
    --testimonials-thumb: #2563eb;
    --testimonials-thumb-hover: #1d4ed8;
    --testimonials-thumb-shadow: rgba(37, 99, 235, .28);
    --testimonials-thumb-shadow-hover: rgba(8, 145, 178, .48);
    --testimonial-card-color: #344054;
    --testimonial-card-border: rgba(37, 99, 235, .16);
    --testimonial-card-background:
        linear-gradient(135deg, rgba(37, 99, 235, .07), transparent 42%),
        #ffffff;
    --testimonial-card-shadow: 0 18px 42px rgba(15, 23, 42, .09);
    --testimonial-card-code: #64748b;
    --testimonial-card-hover-border: rgba(37, 99, 235, .42);
    --testimonial-card-hover-shadow:
        0 20px 48px rgba(15, 23, 42, .13),
        0 0 0 1px rgba(37, 99, 235, .08);
    --testimonial-stars: #d97706;
    --testimonial-quote: #344054;
    --testimonial-divider: rgba(148, 163, 184, .3);
    --testimonial-author: #172033;
    --testimonial-company: #667085;
    --testimonials-hint: #667085;
    --testimonials-count-border: rgba(37, 99, 235, .22);
    --testimonials-count-color: #1d4ed8;
    --testimonials-count-background: rgba(37, 99, 235, .07);
    border-block: 1px solid rgba(37, 99, 235, .15);
    color: #344054;
    background:
        radial-gradient(circle at 12% 10%, rgba(37, 99, 235, .11), transparent 30rem),
        linear-gradient(180deg, #f8fbff, #eef4ff);
}

.testimonials .section__label {
    color: var(--testimonials-label);
}

.testimonials .section__title {
    color: var(--testimonials-title);
}

.testimonials-carousel {
    --carousel-focus: var(--testimonials-focus);
    --carousel-track: var(--testimonials-track);
    --carousel-track-hover: var(--testimonials-track-hover);
    --carousel-track-border: var(--testimonials-track-border);
    --carousel-scrollbar: var(--testimonials-scrollbar);
    --carousel-scrollbar-hover: var(--testimonials-scrollbar-hover);
    --carousel-thumb: var(--testimonials-thumb);
    --carousel-thumb-hover: var(--testimonials-thumb-hover);
    --carousel-thumb-shadow: var(--testimonials-thumb-shadow);
    --carousel-thumb-shadow-hover: var(--testimonials-thumb-shadow-hover);
}

.testimonials-grid {
    grid-auto-columns: calc((100% - 44px) / 3);
    gap: 22px;
}

.testimonial-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px;
    border: 1px solid var(--testimonial-card-border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--testimonial-card-color);
    background: var(--testimonial-card-background);
    box-shadow: var(--testimonial-card-shadow);
    contain: layout paint;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.testimonial-card::before {
    content: "// client.review";
    display: block;
    margin-bottom: 15px;
    color: var(--testimonial-card-code);
    font: 700 .7rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: .08em;
}

.testimonial-card:hover {
    border-color: var(--testimonial-card-hover-border);
    box-shadow: var(--testimonial-card-hover-shadow);
}

.testimonial-card__stars {
    margin-bottom: 16px;
    color: var(--testimonial-stars);
    letter-spacing: .12em;
}

.testimonial-card blockquote {
    flex: 1 1 auto;
    margin: 0;
    color: var(--testimonial-quote);
    font-size: 1.05rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.testimonial-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--testimonial-divider);
}

.testimonial-card figcaption strong {
    color: var(--testimonial-author);
}

.testimonial-card figcaption span {
    color: var(--testimonial-company);
    font-size: .9rem;
}

.testimonials-carousel__hint {
    color: var(--testimonials-hint);
    font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.testimonials-carousel__count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--testimonials-count-border);
    border-radius: 7px;
    color: var(--testimonials-count-color);
    background: var(--testimonials-count-background);
    font: 750 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
}

/* Formulaire de contact */

.contact-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.contact-card__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, .68);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-card__button {
    width: auto;
    min-width: 210px;
    overflow: hidden;
    isolation: isolate;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .2);
    animation: console-button-pulse 2.2s ease-in-out infinite;
}

.contact-card__button::before {
    content: "$";
    position: relative;
    z-index: 1;
    color: #16a34a;
    font-weight: 900;
}

.contact-card__button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateX(-130%);
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(34, 197, 94, .07) 42%,
        rgba(37, 99, 235, .14) 50%,
        rgba(34, 197, 94, .07) 58%,
        transparent 75%
    );
    animation: console-button-scan 2.8s ease-in-out infinite;
}

.contact-card__label,
.contact-card__cursor {
    position: relative;
    z-index: 1;
}

.contact-card__cursor {
    font-size: 1.25rem;
    animation: console-cursor-blink 900ms steps(1, end) infinite;
}

.contact-card__button:hover .contact-card__cursor {
    transform: none;
}

@keyframes console-button-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(34, 197, 94, .18),
            0 0 0 rgba(37, 99, 235, 0);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(34, 197, 94, .08),
            0 0 24px rgba(37, 99, 235, .22);
    }
}

@keyframes console-button-scan {
    0%,
    20% {
        transform: translateX(-130%);
    }

    70%,
    100% {
        transform: translateX(130%);
    }
}

@keyframes console-cursor-blink {
    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: .12;
    }
}

.contact-modal {
    width: calc(100% - 32px);
    width: min(820px, calc(100% - 32px));
    max-height: 90vh;
    max-height: min(90vh, 820px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    color: #d7e2f0;
    background: #07101c;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
}

body.has-open-contact-modal {
    overflow: hidden;
}

.contact-modal--fallback:not([open]) {
    display: none;
}

.contact-modal--fallback[open] {
    position: fixed;
    z-index: 1000;
    top: 5vh;
    right: 16px;
    left: 16px;
    display: block;
    width: auto;
    max-width: 820px;
    box-shadow:
        0 34px 90px rgba(15, 23, 42, .32),
        0 0 0 100vmax rgba(15, 23, 42, .68);
}

.contact-modal[open] {
    animation: modal-enter 360ms cubic-bezier(.2, .8, .25, 1) both;
}

.contact-modal.is-closing {
    animation: modal-leave 220ms ease both;
}

.contact-modal::backdrop {
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(7px);
    animation: backdrop-enter 280ms ease both;
}

.contact-modal.is-closing::backdrop {
    animation: backdrop-leave 220ms ease both;
}

.contact-modal__panel {
    max-height: 90vh;
    max-height: min(90vh, 820px);
    overflow-y: auto;
    padding: 34px;
}

.contact-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.contact-modal__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.contact-modal h2 {
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.contact-modal__description {
    max-width: 600px;
    margin: 12px 0 26px;
    color: var(--muted);
    line-height: 1.65;
}

.contact-modal__close {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    background: var(--surface-hover);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.contact-modal__close:hover {
    border-color: rgba(37, 99, 235, .35);
    color: var(--primary);
    transform: rotate(8deg);
}

.contact-form {
    position: relative;
    z-index: 1;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.contact-form form > div:not(.contact-form__grid):not(.form-trap),
.contact-form__grid > div {
    margin-bottom: 14px;
}

.contact-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: .88rem;
    font-weight: 700;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: var(--surface-hover);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form ul {
    margin: 6px 0 0;
    padding: 0;
    color: #b91c1c;
    font-size: .82rem;
    list-style: none;
}

/* Console de contact */

.contact-modal__panel--terminal {
    position: relative;
    display: flex;
    flex-direction: column;
    height: min(90vh, 820px);
    height: min(90dvh, 820px);
    padding: 0;
    overflow: hidden;
    color: #d7e2f0;
    background:
        radial-gradient(circle at 85% 5%, rgba(34, 211, 238, .09), transparent 30%),
        #07101c;
}

.contact-terminal__bar {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    min-height: 52px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 9px 12px 9px 17px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    background: #101a28;
}

.contact-terminal__dots {
    display: flex;
    gap: 7px;
}

.contact-terminal__dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fb5f57;
}

.contact-terminal__dots span:nth-child(2) {
    background: #fbbd2e;
}

.contact-terminal__dots span:nth-child(3) {
    background: #28c840;
}

.contact-terminal__title {
    overflow: hidden;
    color: #8fa4bc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-terminal__close {
    width: 34px;
    height: 34px;
    border-color: rgba(148, 163, 184, .18);
    color: #8fa4bc;
    background: rgba(255, 255, 255, .04);
    font-size: 1.35rem;
}

.contact-terminal__close:hover {
    border-color: rgba(248, 113, 113, .5);
    color: #f87171;
}

.contact-terminal__screen {
    flex: 1 1 auto;
    min-height: 0;
    padding: 27px 30px 31px;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-color: #22d3ee #101a28;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.contact-terminal__screen::-webkit-scrollbar {
    width: 10px;
}

.contact-terminal__screen::-webkit-scrollbar-track {
    background: #101a28;
}

.contact-terminal__screen::-webkit-scrollbar-thumb {
    border: 2px solid #101a28;
    border-radius: 999px;
    background: linear-gradient(180deg, #67e8f9, #22d3ee);
    box-shadow: 0 0 10px rgba(34, 211, 238, .5);
}

.contact-terminal__scrollbar {
    position: absolute;
    z-index: 5;
    top: 61px;
    right: 4px;
    bottom: 10px;
    width: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(103, 232, 249, .12);
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .12);
    opacity: .38;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.contact-terminal__scrollbar.is-scrollable {
    opacity: 1;
}

.contact-terminal__scrollbar span {
    display: block;
    width: 100%;
    min-height: 36px;
    border-radius: inherit;
    background: linear-gradient(180deg, #a5f3fc, #22d3ee);
    box-shadow: 0 0 10px rgba(34, 211, 238, .65);
    transform: translateY(0);
    will-change: height, transform;
}

.contact-terminal__output {
    padding-bottom: 22px;
    border-bottom: 1px dashed rgba(148, 163, 184, .2);
    color: #9eb0c5;
    font-size: .88rem;
    line-height: 1.65;
}

.contact-terminal__output p {
    margin: 4px 0;
}

.contact-terminal__output h2 {
    margin: 12px 0 5px;
    color: #f1f5f9;
    font-family: inherit;
    font-size: clamp(1.2rem, 4vw, 1.65rem);
    letter-spacing: -.02em;
}

.contact-terminal__prompt,
.contact-terminal__history-label {
    color: #67e8f9;
}

.contact-terminal__success {
    color: #4ade80;
}

.contact-terminal__history-value {
    color: #e2e8f0;
}

.contact-terminal__question {
    color: #fbbf24;
}

.contact-terminal kbd,
.console-contact__hint kbd {
    padding: 2px 6px;
    border: 1px solid rgba(148, 163, 184, .26);
    border-bottom-width: 2px;
    border-radius: 5px;
    color: #dbeafe;
    background: rgba(148, 163, 184, .1);
    font: inherit;
    font-size: .78em;
}

.contact-form--console {
    padding-top: 23px;
}

.contact-form.contact-form--console form > div:not(.form-trap) {
    margin-bottom: 0;
}

.console-contact__step.is-active,
.console-contact__confirmation:not([hidden]) {
    animation: console-step-enter 280ms ease both;
}

.console-contact__step label {
    margin: 0 0 14px;
    color: #f1f5f9;
    font-family: inherit;
    font-size: .98rem;
    line-height: 1.5;
}

.contact-form--console .console-contact__input {
    width: 100%;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(103, 232, 249, .42);
    border-radius: 0;
    outline: 0;
    color: #4ade80;
    background: transparent;
    caret-color: #67e8f9;
    font: 500 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    box-shadow: none;
}

.contact-form--console .console-contact__input::placeholder {
    color: #53657a;
}

.contact-form--console .console-contact__input:focus {
    border-color: #67e8f9;
    color: #86efac;
    background: rgba(15, 23, 42, .32);
    box-shadow: 0 1px 0 #67e8f9;
}

.contact-form--console .console-contact__input.is-invalid {
    border-color: #fb7185;
    box-shadow: 0 1px 0 #fb7185;
}

.contact-form--console .console-contact__textarea {
    min-height: 132px;
    resize: vertical;
}

.console-contact__feedback {
    min-height: 22px;
    padding-top: 7px;
    color: #fb7185;
    font-size: .78rem;
}

.contact-form--console ul {
    color: #fb7185;
    font-family: inherit;
}

.contact-form--console ul li::before {
    content: "✗ Erreur : ";
    font-weight: 800;
}

.console-contact__hint {
    margin: 4px 0 0;
    color: #718399;
    font-size: .74rem;
    line-height: 1.5;
}

.console-contact__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    margin-top: 20px;
}

.console-contact__next,
.console-contact__previous,
.console-contact__submit {
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid rgba(103, 232, 249, .4);
    border-radius: 8px;
    color: #07101c;
    background: #67e8f9;
    font: 750 .82rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.console-contact__previous {
    color: #9eb0c5;
    background: transparent;
}

.console-contact__next:hover,
.console-contact__submit:hover {
    background: #a5f3fc;
    transform: translateY(-1px);
}

.console-contact__previous:hover {
    border-color: #67e8f9;
    color: #e2e8f0;
}

.console-contact__submit:disabled {
    cursor: wait;
    opacity: .65;
}

.console-contact__confirmation > p {
    margin: 0 0 14px;
}

.console-contact__summary {
    display: grid;
    gap: 1px;
    margin: 0;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 9px;
    overflow: hidden;
    background: rgba(148, 163, 184, .14);
}

.console-contact__summary div {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 11px;
    background: #0b1522;
}

.console-contact__summary dt {
    color: #67e8f9;
}

.console-contact__summary dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: #dbeafe;
}

.console-contact__command {
    margin-top: 18px !important;
    color: #e2e8f0;
}

html:not(.js-enabled) .console-contact__actions,
html:not(.js-enabled) .console-contact__confirmation {
    display: none;
}

@keyframes console-step-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modal-leave {
    to {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }
}

@keyframes backdrop-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes backdrop-leave {
    to {
        opacity: 0;
    }
}

.form-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.button--light {
    width: 100%;
    border: 0;
    color: var(--primary);
    background: #fff;
    cursor: pointer;
}

.flash-stack {
    position: fixed;
    top: 116px;
    left: 50%;
    z-index: 40;
    display: grid;
    gap: 10px;
    width: min(620px, calc(100% - 24px));
    transform: translateX(-50%);
    pointer-events: none;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    color: #fff;
    box-shadow: var(--shadow);
    transition: opacity 280ms ease, transform 280ms ease;
    pointer-events: auto;
}

.flash.is-leaving {
    opacity: 0;
    transform: translateY(-12px) scale(.98);
}

.flash button {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.flash--success {
    background: #15803d;
}

.flash--error {
    background: #b91c1c;
}

.flash--danger {
    background: #b91c1c;
}

.flash--terminal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(103, 232, 249, .28);
    border-radius: 13px;
    color: #dbeafe;
    background: #07101c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .34);
}

.flash--terminal > button {
    position: absolute;
    top: 8px;
    right: 11px;
    z-index: 1;
    color: #94a3b8;
}

.flash-terminal__bar {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 42px 8px 13px;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
    background: #101a28;
}

.flash-terminal__bar > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fb5f57;
}

.flash-terminal__bar > span:nth-child(2) {
    background: #fbbd2e;
}

.flash-terminal__bar > span:nth-child(3) {
    background: #28c840;
}

.flash-terminal__bar code {
    margin-left: 7px;
    color: #8293a8;
    font-size: .68rem;
}

.flash-terminal__body {
    padding: 15px 17px 17px;
    font-size: .8rem;
    line-height: 1.55;
}

.flash-terminal__body p {
    margin: 3px 0;
}

.flash-terminal__prompt {
    color: #67e8f9;
}

.flash-terminal__result {
    color: #4ade80;
}

/* Connexion */

.login-section {
    min-height: calc(100vh - 145px);
    display: grid;
    place-items: center;
    padding: 70px 16px;
}

.login-card {
    width: min(460px, 100%);
    display: grid;
    padding: 36px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.login-card h1 {
    margin: 0;
    font-size: 2.2rem;
}

.login-card > p {
    margin: 10px 0 28px;
    color: var(--muted);
}

.login-card label {
    margin: 15px 0 7px;
    font-weight: 700;
}

.login-card input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
}

.login-card input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.login-card .button {
    margin-top: 22px;
}

.form-error {
    padding: 12px;
    border-radius: 10px;
    color: #991b1b;
    background: #fee2e2;
}

@media (max-width: 980px) {
    .contact-card {
        grid-template-columns: 1fr;
    }

    .contact-card__button {
        justify-self: start;
    }

    .projects-grid,
    .testimonials-grid {
        grid-auto-columns: calc((100% - 22px) / 2);
    }
}

@media (max-width: 700px) {
    .site-header__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 8px 0 10px;
    }

    .site-nav {
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
        gap: 18px;
        overflow-x: auto;
        padding: 2px 0 8px;
        scrollbar-width: none;
    }

    .site-header__controls {
        width: 100%;
        gap: 9px;
    }

    .theme-toggle {
        min-height: 36px;
        margin-bottom: 5px;
        padding-inline: 9px;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .dev-status__inner {
        gap: 15px;
    }

    .flash-stack {
        top: 142px;
    }

    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .theme-toggle__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 680px) {
    .contact-modal {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }

    .projects-grid,
    .testimonials-grid {
        grid-auto-columns: min(88%, 360px);
        gap: 14px;
    }

    .testimonial-card {
        padding: 23px;
    }

    .content-carousel__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .contact-form {
        padding: 0;
    }

    .contact-modal__panel {
        padding: 25px 20px;
    }

    .contact-modal__panel.contact-modal__panel--terminal {
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        padding: 0;
    }

    .contact-terminal__bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 9px;
        padding-left: 12px;
    }

    .contact-terminal__dots {
        gap: 5px;
    }

    .contact-terminal__dots span {
        width: 9px;
        height: 9px;
    }

    .contact-terminal__screen {
        min-height: 0;
        padding: 21px 21px 24px 17px;
    }

    .contact-terminal__scrollbar {
        top: 59px;
        right: 3px;
        bottom: 7px;
        width: 5px;
    }

    .contact-terminal__output {
        font-size: .78rem;
    }

    .console-contact__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .console-contact__next,
    .console-contact__previous,
    .console-contact__submit {
        width: 100%;
    }

    .console-contact__summary div {
        grid-template-columns: 72px minmax(0, 1fr);
        font-size: .78rem;
    }

    .hero h1 {
        font-size: clamp(2.8rem, 15vw, 4.3rem);
    }

    .hero__description {
        margin-top: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.force-mobile-motion) {
        scroll-behavior: auto;
    }

    html:not(.force-mobile-motion) *,
    html:not(.force-mobile-motion) *::before,
    html:not(.force-mobile-motion) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    html.js-enabled:not(.force-mobile-motion) .reveal {
        opacity: 1;
        transform: none;
    }

    html:not(.force-mobile-motion) .typewriter__text::after {
        display: none;
    }
}

/* Thème sombre */

:root[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34rem),
        radial-gradient(circle at 88% 12%, rgba(124, 58, 237, .12), transparent 30rem),
        var(--background);
}

:root[data-theme="dark"] .site-header {
    border-bottom-color: rgba(71, 85, 105, .58);
    background: rgba(8, 13, 23, .88);
}

:root[data-theme="dark"] .dev-status {
    color: #91a2b8;
    border-bottom-color: rgba(96, 165, 250, .16);
    background: rgba(2, 6, 23, .38);
}

:root[data-theme="dark"] .dev-status code {
    color: #91a2b8;
}

:root[data-theme="dark"] .dev-status__online {
    color: #4ade80;
}

:root[data-theme="dark"] .section--muted {
    background: rgba(15, 23, 42, .48);
}

:root[data-theme="dark"] .section__label::before,
:root[data-theme="dark"] .hero__signature,
:root[data-theme="dark"] .hero__signature--close {
    color: #94a3b8;
}

:root[data-theme="dark"] .hero::before {
    background: rgba(124, 58, 237, .2);
}

:root[data-theme="dark"] .hero__signature span,
:root[data-theme="dark"] .skill-card__code,
:root[data-theme="dark"] .process-card__function {
    color: #c4b5fd;
}

:root[data-theme="dark"] .hero__seo-summary {
    color: #b9c7d9;
    border-left-color: rgba(96, 165, 250, .72);
    background: rgba(59, 130, 246, .1);
}

:root[data-theme="dark"] .hero__card {
    background: rgba(17, 26, 41, .88);
}

:root[data-theme="dark"] .hero__profiles a {
    background: rgba(24, 36, 55, .82);
}

:root[data-theme="dark"] .hero__profiles a:hover {
    border-color: rgba(96, 165, 250, .46);
    background: rgba(59, 130, 246, .14);
}

:root[data-theme="dark"] .button--secondary:hover {
    border-color: #43536b;
}

:root[data-theme="dark"] .project-card:hover,
:root[data-theme="dark"] .hero__card:hover {
    box-shadow: 0 25px 58px rgba(0, 0, 0, .38);
}

:root[data-theme="dark"] .project-card__image {
    background: #0d1625;
}

:root[data-theme="dark"] .project-card__image--placeholder {
    color: rgba(147, 197, 253, .28);
    background:
        radial-gradient(circle at 75% 25%, rgba(139, 92, 246, .24), transparent 35%),
        linear-gradient(135deg, #111d32, #1b1732);
}

:root[data-theme="dark"] .testimonials {
    --testimonials-label: #67e8f9;
    --testimonials-title: #f8fafc;
    --testimonials-focus: #67e8f9;
    --testimonials-track: rgba(148, 163, 184, .22);
    --testimonials-track-hover: rgba(148, 163, 184, .28);
    --testimonials-track-border: rgba(103, 232, 249, .18);
    --testimonials-scrollbar: #22d3ee;
    --testimonials-scrollbar-hover: #67e8f9;
    --testimonials-thumb: #22d3ee;
    --testimonials-thumb-hover: #67e8f9;
    --testimonials-thumb-shadow: rgba(34, 211, 238, .28);
    --testimonials-thumb-shadow-hover: rgba(34, 211, 238, .6);
    --testimonial-card-color: #dbeafe;
    --testimonial-card-border: rgba(148, 163, 184, .2);
    --testimonial-card-background:
        linear-gradient(135deg, rgba(37, 99, 235, .09), transparent 42%),
        #0d1726;
    --testimonial-card-shadow: 0 18px 42px rgba(0, 0, 0, .22);
    --testimonial-card-code: #64748b;
    --testimonial-card-hover-border: rgba(103, 232, 249, .48);
    --testimonial-card-hover-shadow:
        0 20px 48px rgba(0, 0, 0, .3),
        0 0 0 1px rgba(34, 211, 238, .12);
    --testimonial-stars: #fbbf24;
    --testimonial-quote: #e2e8f0;
    --testimonial-divider: rgba(148, 163, 184, .17);
    --testimonial-author: #f8fafc;
    --testimonial-company: #94a3b8;
    --testimonials-hint: #64748b;
    --testimonials-count-border: rgba(103, 232, 249, .2);
    --testimonials-count-color: #a5f3fc;
    --testimonials-count-background: rgba(14, 116, 144, .14);
    border-block-color: rgba(96, 165, 250, .16);
    color: #e2e8f0;
    background:
        radial-gradient(circle at 12% 10%, rgba(37, 99, 235, .16), transparent 30rem),
        linear-gradient(180deg, #080f1c, #050912);
}

:root[data-theme="dark"] .project-card .tag:nth-child(6n + 1),
:root[data-theme="dark"] .skill-card .tag:nth-child(6n + 1) {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, .4);
    background: rgba(37, 99, 235, .17);
}

:root[data-theme="dark"] .project-card .tag:nth-child(6n + 2),
:root[data-theme="dark"] .skill-card .tag:nth-child(6n + 2) {
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, .4);
    background: rgba(124, 58, 237, .18);
}

:root[data-theme="dark"] .project-card .tag:nth-child(6n + 3),
:root[data-theme="dark"] .skill-card .tag:nth-child(6n + 3) {
    color: #86efac;
    border-color: rgba(74, 222, 128, .36);
    background: rgba(22, 163, 74, .17);
}

:root[data-theme="dark"] .project-card .tag:nth-child(6n + 4),
:root[data-theme="dark"] .skill-card .tag:nth-child(6n + 4) {
    color: #fcd34d;
    border-color: rgba(251, 191, 36, .36);
    background: rgba(180, 83, 9, .18);
}

:root[data-theme="dark"] .project-card .tag:nth-child(6n + 5),
:root[data-theme="dark"] .skill-card .tag:nth-child(6n + 5) {
    color: #fda4af;
    border-color: rgba(251, 113, 133, .38);
    background: rgba(190, 18, 60, .18);
}

:root[data-theme="dark"] .project-card .tag:nth-child(6n),
:root[data-theme="dark"] .skill-card .tag:nth-child(6n) {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, .38);
    background: rgba(14, 116, 144, .2);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="blue"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="blue"] {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, .4);
    background: rgba(37, 99, 235, .17);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="violet"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="violet"] {
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, .4);
    background: rgba(124, 58, 237, .18);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="green"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="green"] {
    color: #86efac;
    border-color: rgba(74, 222, 128, .36);
    background: rgba(22, 163, 74, .17);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="amber"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="amber"] {
    color: #fcd34d;
    border-color: rgba(251, 191, 36, .36);
    background: rgba(180, 83, 9, .18);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="rose"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="rose"] {
    color: #fda4af;
    border-color: rgba(251, 113, 133, .38);
    background: rgba(190, 18, 60, .18);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="cyan"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="cyan"] {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, .38);
    background: rgba(14, 116, 144, .2);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="indigo"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="indigo"] {
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, .42);
    background: rgba(79, 70, 229, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="teal"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="teal"] {
    color: #5eead4;
    border-color: rgba(45, 212, 191, .38);
    background: rgba(15, 118, 110, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="lime"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="lime"] {
    color: #bef264;
    border-color: rgba(163, 230, 53, .38);
    background: rgba(77, 124, 15, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="orange"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="orange"] {
    color: #fdba74;
    border-color: rgba(251, 146, 60, .4);
    background: rgba(194, 65, 12, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="red"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="red"] {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, .4);
    background: rgba(185, 28, 28, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="pink"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="pink"] {
    color: #f9a8d4;
    border-color: rgba(244, 114, 182, .4);
    background: rgba(190, 24, 93, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="fuchsia"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="fuchsia"] {
    color: #f0abfc;
    border-color: rgba(232, 121, 249, .4);
    background: rgba(162, 28, 175, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="sky"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="sky"] {
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, .4);
    background: rgba(3, 105, 161, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="emerald"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="emerald"] {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, .38);
    background: rgba(4, 120, 87, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="slate"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="slate"] {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .38);
    background: rgba(71, 85, 105, .3);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="purple"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="purple"] {
    color: #d8b4fe;
    border-color: rgba(192, 132, 252, .4);
    background: rgba(126, 34, 206, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="yellow"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="yellow"] {
    color: #fde047;
    border-color: rgba(250, 204, 21, .4);
    background: rgba(161, 98, 7, .22);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="stone"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="stone"] {
    color: #d6d3d1;
    border-color: rgba(168, 162, 158, .4);
    background: rgba(87, 83, 78, .32);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="navy"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="navy"] {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, .45);
    background: rgba(30, 58, 138, .32);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="mint"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="mint"] {
    color: #99f6e4;
    border-color: rgba(45, 212, 191, .42);
    background: rgba(15, 118, 110, .24);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="forest"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="forest"] {
    color: #86efac;
    border-color: rgba(34, 197, 94, .42);
    background: rgba(20, 83, 45, .42);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="olive"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="olive"] {
    color: #d9f99d;
    border-color: rgba(163, 230, 53, .42);
    background: rgba(77, 95, 10, .4);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="mustard"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="mustard"] {
    color: #fde68a;
    border-color: rgba(234, 179, 8, .44);
    background: rgba(133, 77, 14, .4);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="copper"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="copper"] {
    color: #fdba74;
    border-color: rgba(234, 88, 12, .44);
    background: rgba(154, 52, 18, .38);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="coral"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="coral"] {
    color: #fda4af;
    border-color: rgba(251, 113, 133, .44);
    background: rgba(185, 56, 46, .36);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="ruby"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="ruby"] {
    color: #fb7185;
    border-color: rgba(244, 63, 94, .46);
    background: rgba(159, 18, 57, .4);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="burgundy"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="burgundy"] {
    color: #f9a8d4;
    border-color: rgba(236, 72, 153, .42);
    background: rgba(112, 26, 61, .44);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="lavender"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="lavender"] {
    color: #ddd6fe;
    border-color: rgba(196, 181, 253, .42);
    background: rgba(107, 70, 161, .38);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="orchid"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="orchid"] {
    color: #f0abfc;
    border-color: rgba(232, 121, 249, .44);
    background: rgba(134, 25, 143, .4);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="cobalt"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="cobalt"] {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, .46);
    background: rgba(30, 64, 175, .42);
}

:root[data-theme="dark"] .skill-card .tags .tag[data-tag-tone="graphite"],
:root[data-theme="dark"] .project-card .tags .tag[data-tag-tone="graphite"] {
    color: #d1d5db;
    border-color: rgba(156, 163, 175, .42);
    background: rgba(55, 65, 81, .5);
}

:root[data-theme="dark"] .contact-card .button,
:root[data-theme="dark"] .button--light {
    color: #0f172a;
}

:root[data-theme="dark"] .login-card input {
    color: var(--text);
    background: var(--surface-hover);
}

:root[data-theme="dark"] .login-card input:focus {
    background: var(--surface);
}

:root[data-theme="dark"] .form-error {
    color: #fecaca;
    background: rgba(185, 28, 28, .24);
}

:root[data-theme="dark"] .brand__icon,
:root[data-theme="dark"] .footer-brand img {
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
}