@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
/* Réinitialise les éléments et définit une typographie accessible et lisible. */
/* ===== BASE ET TYPOGRAPHIE ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--heading); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); margin-bottom: 24px; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { color: var(--muted); }
a { color: var(--link, var(--text)); text-underline-offset: 5px; transition: color var(--motion), text-decoration-color var(--motion); }
a:hover { text-decoration-color: var(--accent); }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
ul, ol { padding-left: 24px; color: var(--muted); }
li { margin-bottom: 9px; }
li::marker { color: var(--accent); }
strong { color: var(--text); }
code { font: .9em var(--mono); overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--accent); color: var(--accent-ink); }
.skip-link:focus { top: 12px; }
/* ===== PRÉFÉRENCE DE MOUVEMENT RÉDUIT ===== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .card:hover, .quick-card:hover, .button:hover { transform: none !important; box-shadow: none !important; }
    .reveal.will-reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== TITRES ET LIENS : LA COULEUR RESTE UN ACCENT ===== */
h1, h2, h3, h4 { font-weight: 500; }
a:hover { color: var(--link, var(--text)); }
main { counter-reset: section; }
main > section { counter-increment: section; }
main > section:not(.hero):not(:has(> .eyebrow)):not(:has(> .section-head .eyebrow)):not([role="tabpanel"]) > h2::before,
main > section.split > div > h2:first-child::before {
    content: 'eth' counter(section);
    display: block;
    margin-bottom: 15px;
    font: 12px/1.6 var(--mono);
    letter-spacing: .08em;
    color: var(--label);
}
/* ===== RÉDUCTION COMPLÈTE DES EFFETS ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .button:hover, .button:hover::after, .card:hover { transform: none !important; }
    .card:hover, .card:focus-within { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: none !important; }
    .badge:hover { background: var(--bg) !important; color: var(--muted) !important; border-color: var(--line) !important; }
    .main-nav a:not([aria-current]):hover::after { transform: scaleX(0) !important; }
    .button:not(.primary):hover { background: var(--surface) !important; color: var(--text) !important; }
}

/* Décor SVG géométrique, sans interaction ni coût de défilement. */
body { isolation:isolate; }
.ambient { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; color:var(--accent); opacity:.1; }
.ambient svg { position:absolute; width:820px; height:820px; right:-370px; top:12%; animation:orbit 70s linear infinite; }
.ambient svg:nth-child(2) { width:580px; height:580px; left:-400px; top:60%; animation-direction:reverse; }
@keyframes orbit { to { transform:rotate(360deg); } }


.motion-toggle { display:block; margin:16px 0 0 auto; border:1px solid var(--line); background:var(--surface); color:var(--muted); padding:8px 12px; border-radius:6px; font:11px/1.5 var(--mono); }
[data-motion="paused"] *, [data-motion="paused"] *::before, [data-motion="paused"] *::after { animation-play-state:paused!important; transition:none!important; }

@media(prefers-reduced-motion:reduce) {  .profile-panel,.quick-card:hover::after { transform:none!important; } }


@media(max-width:650px) {  .ambient { opacity:.065; } }
p,li { max-width:75ch; }
html[lang="ar"] { --sans:'Cairo',system-ui,sans-serif; --heading:'Cairo',system-ui,sans-serif; --mono:'Cairo',ui-monospace,monospace; }
html[lang="zh"] { --sans:'Noto Sans SC',system-ui,sans-serif; --heading:'Noto Sans SC',system-ui,sans-serif; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3 { letter-spacing:0; line-height:1.45; }
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3 { letter-spacing:0; line-height:1.35; }
[dir="rtl"] .main-nav { margin-left:0; margin-inline-start:auto; }
[dir="rtl"] .timeline { border-left:0; border-right:1px solid var(--line); padding-left:0; padding-right:28px; }
[dir="rtl"] .timeline li::before { left:auto;right:-34px; }
[dir="rtl"] .profile-panel { transform:rotate(-1deg); }
[dir="rtl"] .home-strip div {border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:28px;}
[dir="rtl"] .home-strip div:first-child {border-right:0;padding-right:0;}
[dir="rtl"] th:first-child {text-align:right;}
.profile-terminal {direction:ltr;text-align:left;}
.name-letter { opacity:0; animation:name-in 220ms ease forwards; animation-delay:var(--delay); }
@keyframes name-in {to {opacity:1;}}
.reveal.will-reveal {opacity:1;transform:translateY(16px);}
@media(prefers-reduced-motion:reduce){.name-letter{opacity:1!important;animation:none!important;} [dir="rtl"] .profile-panel{transform:none;}}

[data-motion="paused"] .name-letter { opacity:1!important; }
.hero h1[data-no-i18n] { direction:ltr; font-family:'Fraunces',Georgia,serif; }
[dir="rtl"] .hero h1[data-no-i18n] { text-align:right; }
[dir="rtl"] .button::after { content:'←'; }
[dir="rtl"] .button:hover::after { transform:translateX(-4px); }
@media(prefers-reduced-motion:reduce){[dir="rtl"] .button:hover::after{transform:none!important;}}

[dir="rtl"] .button.primary:not([aria-disabled="true"])::after,[dir="rtl"] .button:not(.primary):not([aria-disabled])::after {content:'←';}