/* DEV IT v2 : direction « IDE ». Fond marine profond, code, terminal, git. */

:root {
  --bg: #0b1020;
  --bg-2: #0f172a;
  --panel: #111a2e;
  --panel-2: #16213a;
  --line: #1f2b47;
  --line-2: #2a3a5e;
  --text: #e6edf7;
  --text-2: #b6c2d9;
  --muted: #7d8db0;
  --blue: #3b82f6;
  --blue-2: #60a5fa;
  --blue-deep: #1f5eff;
  --glow: rgba(59, 130, 246, .35);
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  /* syntaxe (palette bleu nuit) */
  --kw: #7aa2f7;
  --type: #2ac3de;
  --str: #9ece6a;
  --num: #ff9e64;
  --fn: #7dcfff;
  --cm: #565f89;
  --punct: #a9b1d6;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
  --font-display: "Chakra Petch", "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --wrap: 1180px;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65; overflow-x: hidden;
  background-image:
    radial-gradient(70% 50% at 85% -10%, rgba(31,94,255,.22), transparent 60%),
    radial-gradient(40% 30% at 0% 30%, rgba(42,195,222,.08), transparent 60%);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
}
main, header, footer { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
a { color: var(--blue-2); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: .005em; margin: 0; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--font-mono); }
.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }

/* repères de section : commentaires de code */
.cm-label { font-family: var(--font-mono); font-size: .82rem; color: var(--cm); margin-bottom: .9rem; display: block; }
.cm-label b { color: var(--kw); font-weight: 500; }
.kw { color: var(--kw); } .type { color: var(--type); } .str { color: var(--str); } .num { color: var(--num); } .fn { color: var(--fn); } .cm { color: var(--cm); } .punct { color: var(--punct); }

/* boutons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem; border-radius: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: .92rem; text-decoration: none; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; cursor: pointer;
}
.btn-primary { background: var(--blue-deep); color: #fff; box-shadow: 0 10px 30px -12px var(--glow); }
.btn-primary:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--glow); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--blue-2); color: var(--blue-2); transform: translateY(-2px); }
.btn .p { color: var(--blue-2); }
.btn-primary .p { color: #bcd3ff; }

/* navigation */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(11,16,32,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 1.1rem; height: 68px; position: relative; }
.nav-cta { padding: .7rem 1rem; font-size: .85rem; white-space: nowrap; }
@media (max-width: 1240px) { .nav-links { gap: .8rem; } .nav-links a { font-size: .76rem; } .nav-cta { padding: .6rem .8rem; font-size: .78rem; } }
@media (max-width: 1060px) and (min-width: 761px) { .nav-cta { display: none; } }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); }
.brand .logo { width: 62px; height: 40px; background: #fff; -webkit-mask: url(logo-masque.png) no-repeat left center / contain; mask: url(logo-masque.png) no-repeat left center / contain; filter: drop-shadow(0 0 10px rgba(59,130,246,.45)); }
.nav-links { display: flex; gap: 1.1rem; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a { color: var(--text-2); text-decoration: none; font-family: var(--font-mono); font-size: .82rem; white-space: nowrap; }
.nav-links a::before { content: "./"; color: var(--cm); }
.nav-links a:hover { color: var(--blue-2); }
.lang { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); display: flex; gap: .2rem; }
.lang a { color: var(--text-2); text-decoration: none; padding: .2rem .4rem; border-radius: 6px; }
.lang .on { color: var(--blue-2); font-weight: 600; }
.nav-links .lang { display: none; }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 8px; width: 42px; height: 42px; cursor: pointer; color: var(--text); }
.burger svg { width: 22px; height: 22px; }

/* hero */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
.hero h1 .hl { color: var(--blue-2); text-shadow: 0 0 24px rgba(96,165,250,.45); }
.hero-lead { font-size: 1.15rem; color: var(--text-2); max-width: 32rem; margin: 1.3rem 0 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-note { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin-top: 1.4rem; }
.hero-note .ok { color: var(--green); }
.rise > * { opacity: 0; transform: translateY(16px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.rise > *:nth-child(1) { animation-delay: .05s } .rise > *:nth-child(2) { animation-delay: .15s } .rise > *:nth-child(3) { animation-delay: .25s } .rise > *:nth-child(4) { animation-delay: .35s } .rise > *:nth-child(5) { animation-delay: .45s }
@keyframes rise { to { opacity: 1; transform: none; } }

/* fenêtre IDE */
.ide { border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(59,130,246,.08), 0 0 80px -30px var(--glow); overflow: hidden; animation: rise .9s .3s cubic-bezier(.2,.7,.2,1) both; font-family: var(--font-mono); font-size: .8rem; }
.ide-top { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.ide-top i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ide-top i:nth-child(1) { background: #ff5f57; } .ide-top i:nth-child(2) { background: #febc2e; } .ide-top i:nth-child(3) { background: #28c840; }
.ide-top span { margin-left: auto; color: var(--muted); font-size: .74rem; }
.tabs { display: flex; background: var(--bg-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { padding: .5rem .9rem; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; display: flex; gap: .45rem; align-items: center; }
.tab.on { color: var(--text); background: var(--panel); box-shadow: inset 0 2px 0 var(--blue); }
.tab .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--type); display: inline-block; }
.tab .dot.cs { background: var(--kw); } .tab .dot.diff { background: var(--amber); }
.code { display: grid; grid-template-columns: 2.6rem 1fr; min-height: 250px; }
.gutter { color: var(--cm); text-align: right; padding: .9rem .6rem .9rem 0; border-right: 1px solid var(--line); user-select: none; line-height: 1.6; }
.gutter span { display: block; }
.src { margin: 0; padding: .9rem 1rem; white-space: pre; overflow-x: auto; line-height: 1.6; color: var(--punct); }
.src .cur { display: inline-block; width: .55em; height: 1.1em; background: var(--blue-2); vertical-align: -0.15em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term { border-top: 1px solid var(--line); background: #070b16; padding: .8rem 1rem; min-height: 112px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; }
.term .ps { color: var(--green); } .term .ok { color: var(--green); } .term .dim { color: var(--muted); } .term .warn { color: var(--amber); }
.status { display: flex; gap: 1.2rem; padding: .35rem .9rem; background: var(--blue-deep); color: #e8f0ff; font-size: .72rem; }
.status span::before { content: "git: "; opacity: .8; }
.status span.nb::before { content: "✓ "; }
.status span.ln::before { content: ""; }
.status span.right { margin-left: auto; }
.status span.right::before { content: ""; }

/* bande statut */
.strip { border-block: 1px solid var(--line); background: rgba(15,23,42,.6); }
.strip ul { list-style: none; margin: 0 auto; padding: .9rem 0; width: min(1440px, calc(100% - 2.5rem)); display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.6rem; font-family: var(--font-mono); font-size: .8rem; color: var(--text-2); }
.strip li::before { content: "✓ "; color: var(--green); }

/* sections */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.section h2 .hl { color: var(--blue-2); }
.section-head p { color: var(--text-2); font-size: 1.08rem; margin-top: .9rem; }

/* services : cartes fichiers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.grid-3.first { margin-top: 0; }
.file-wide { margin-top: 1.2rem; }
.hero-lead strong { color: var(--text); font-weight: 600; }
.file { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.file:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 30px 50px -35px rgba(0,0,0,.9), 0 0 40px -25px var(--glow); }
.file-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; background: var(--bg-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.file-head .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--kw); }
.file-head .dot.g { background: var(--green); } .file-head .dot.a { background: var(--amber); } .file-head .dot.t { background: var(--type); }
.file-body { padding: 1.4rem 1.5rem 1.5rem; flex: 1; }
.file h3 { font-size: 1.3rem; margin: 0 0 .6rem; }
.file p { color: var(--text-2); }
.file ul { padding-left: 1.1rem; margin: 0; color: var(--text-2); }
.file li { margin: .3rem 0; }
.file li::marker { color: var(--blue-2); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.tags span { font-family: var(--font-mono); font-size: .72rem; padding: .25rem .5rem; border-radius: 6px; background: rgba(59,130,246,.12); color: var(--blue-2); border: 1px solid rgba(59,130,246,.25); }
.file-small h3 { font-size: 1.08rem; }


/* technologies : stack.json */
.stack { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stack-row { display: grid; grid-template-columns: 170px 1fr; gap: 1rem; padding: .9rem 1.4rem; border-top: 1px solid var(--line); align-items: start; }
.stack-key { font-family: var(--font-mono); font-size: .86rem; padding-top: .25rem; }
.stack-vals { display: flex; flex-wrap: wrap; gap: .4rem; }
.stack-vals span { font-family: var(--font-mono); font-size: .76rem; padding: .28rem .55rem; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--text-2); transition: border-color .15s, color .15s; }
.stack-vals span:hover { border-color: var(--blue-2); color: var(--text); }
@media (max-width: 760px) { .stack-row { grid-template-columns: 1fr; gap: .5rem; } }

/* modernisation : graphe git + diff */
.modern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.git { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem 1rem; }
.git svg { width: 100%; height: auto; display: block; }
.git .lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--text-2); }
.git .lbl.b { fill: var(--blue-2); } .git .lbl.a { fill: var(--amber); } .git .lbl.g { fill: var(--green); }
.git .branch { fill: none; stroke-width: 3; stroke-linecap: round; }
.git .branch.main { stroke: var(--blue); } .git .branch.legacy { stroke: var(--amber); } .git .branch.merge { stroke: var(--green); }
.git .node { stroke-width: 3; }
.git .node.main { fill: var(--bg); stroke: var(--blue); } .git .node.legacy { fill: var(--bg); stroke: var(--amber); } .git .node.done { fill: var(--green); stroke: var(--green); }
.git.draw .branch { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 2.2s ease forwards; }
.git.draw .branch.merge { animation-delay: .8s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.git-legend { display: flex; gap: 1.2rem; font-family: var(--font-mono); font-size: .76rem; color: var(--muted); margin-top: .6rem; }
.git-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1rem; }
.steps li { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; }
.steps li::before { counter-increment: s; content: "0" counter(s); font-family: var(--font-mono); font-size: .78rem; color: var(--blue-2); width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; display: grid; place-items: center; background: var(--panel); }
.steps h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.steps p { color: var(--text-2); margin: 0; font-size: .97rem; }
.diff { margin-top: 1.4rem; background: #070b16; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-mono); font-size: .82rem; line-height: 1.7; overflow: hidden; }
.diff-head { padding: .5rem .9rem; background: var(--bg-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.diff-body { padding: .6rem 0; overflow-x: auto; }
.diff-body div { padding: 0 1rem; white-space: pre; }
.diff-body .m { background: rgba(248,113,113,.12); color: #fca5a5; }
.diff-body .p { background: rgba(52,211,153,.12); color: #86efac; }
.diff-body .c { color: var(--cm); }
.cta-row { margin-top: 2.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* réalisations : git log */
.log { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.log li { display: grid; grid-template-columns: 96px 1fr; gap: 1.6rem; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--line); position: relative; }
.log li:last-child { border-bottom: 0; }
.log li::before { content: ""; position: absolute; left: 128px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.log li::after { content: ""; position: absolute; left: 123px; top: 1.75rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 3px solid var(--blue); }
.log .hash { font-family: var(--font-mono); font-size: .78rem; color: var(--num); padding-top: .25rem; }
.log .hash small { display: block; color: var(--muted); margin-top: .3rem; }
.log h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.log p { color: var(--text-2); margin: 0 0 .6rem; font-size: .98rem; }
.log .tag { font-family: var(--font-mono); font-size: .72rem; color: var(--green); }
.log .tag::before { content: "tag: "; color: var(--cm); }
.note { margin-top: 1rem; font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }

/* méthode : pipeline */
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 0; position: relative; }
.pipe::before { content: ""; position: absolute; left: 6%; right: 6%; top: 22px; height: 2px; background: linear-gradient(to right, var(--green), var(--blue)); opacity: .6; }
.pipe li { position: relative; }
.pipe .stage { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); border: 2px solid var(--green); color: var(--green); display: grid; place-items: center; font-family: var(--font-mono); font-size: .9rem; position: relative; z-index: 1; }
.pipe li:last-child .stage { border-color: var(--blue-2); color: var(--blue-2); }
.pipe h3 { font-size: 1.05rem; margin: .9rem 0 .35rem; }
.pipe h3 small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .74rem; color: var(--muted); margin-top: .2rem; }
.pipe p { color: var(--text-2); font-size: .95rem; margin: 0; }

/* à propos : developer.json */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.json { background: #070b16; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-mono); font-size: .82rem; line-height: 1.75; padding: 1.2rem 1.4rem; white-space: pre; overflow-x: auto; min-width: 0; box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
.json .k { color: var(--fn); } .json .s { color: var(--str); } .json .n { color: var(--num); } .json .b { color: var(--kw); }
.about p { color: var(--text-2); }
.about-logo { width: 150px; height: 100px; background: #fff; -webkit-mask: url(logo-masque.png) no-repeat left center / contain; mask: url(logo-masque.png) no-repeat left center / contain; filter: drop-shadow(0 0 16px rgba(59,130,246,.5)); margin-bottom: 1.2rem; }

/* FAQ : README */
.readme { max-width: 52rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.readme .file-head { justify-content: flex-start; }
.readme details { border-top: 1px solid var(--line); padding: 1rem 1.4rem; }
.readme details:first-of-type { border-top: 0; }
.readme summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; gap: .7rem; align-items: center; }
.readme summary::-webkit-details-marker { display: none; }
.readme summary::before { content: "##"; color: var(--cm); font-family: var(--font-mono); font-weight: 400; }
.readme summary::after { content: "+"; margin-left: auto; color: var(--blue-2); font-family: var(--font-mono); transition: transform .2s; }
.readme details[open] summary::after { transform: rotate(45deg); }
.readme details p { margin: .8rem 0 0 1.9rem; color: var(--text-2); }

/* contact : terminal */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); }
.contact-aside p { color: var(--text-2); }
.contact-lines { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; font-family: var(--font-mono); font-size: .9rem; }
.contact-lines li::before { content: "$ "; color: var(--green); }
.contact-lines a { color: var(--text); text-decoration: none; }
.contact-lines a:hover { color: var(--blue-2); }
.contact-lines small { display: block; color: var(--muted); font-size: .78rem; padding-left: 1.2rem; }
.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
.form-body { padding: 1.4rem 1.6rem 1.6rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.field label::before { content: "> "; color: var(--green); }
.field input, .field select, .field textarea { font: inherit; font-size: .96rem; padding: .7rem .85rem; border-radius: 8px; border: 1px solid var(--line-2); background: #0a1020; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
.field textarea { min-height: 130px; resize: vertical; }
.consent { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--text-2); }
.consent input { margin-top: .25rem; accent-color: var(--blue); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-foot small { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); }
.alert { grid-column: 1 / -1; background: rgba(248,113,113,.12); color: #fca5a5; padding: .7rem 1rem; border-radius: 8px; font-size: .9rem; display: none; border: 1px solid rgba(248,113,113,.3); }
.alert.show { display: block; }

/* footer */
.footer { border-top: 1px solid var(--line); background: rgba(7,11,22,.7); padding: 2.4rem 0 1.8rem; font-size: .9rem; color: var(--text-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer h4 { font-family: var(--font-mono); font-weight: 500; font-size: .78rem; color: var(--muted); margin-bottom: .7rem; }
.footer h4::before { content: "# "; color: var(--cm); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--blue-2); }
.footer p { margin: .8rem 0 0; max-width: 28rem; }
.legal { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .72rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* révélation */
.io { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.io.on { opacity: 1; transform: none; }
.io-d1 { transition-delay: .1s } .io-d2 { transition-delay: .2s } .io-d3 { transition-delay: .3s }
@media (prefers-reduced-motion: reduce) {
  .rise > *, .ide { animation: none !important; opacity: 1; transform: none; }
  .io { opacity: 1; transform: none; transition: none; }
  .git.draw .branch { animation: none; stroke-dashoffset: 0; }
}

/* responsive */
@media (max-width: 1024px) {
  .hero-grid, .modern-grid, .about, .contact { grid-template-columns: 1fr; }
  .grid-3, .pipe { grid-template-columns: 1fr 1fr; }
  .pipe::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-links, .lang.desk, .nav-cta { display: none; }
  .burger { display: grid; place-items: center; }
  .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 68px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 1rem 1.25rem 1.3rem; gap: .9rem; }
  .nav.open .nav-links .lang { display: flex; }
  .grid-2, .grid-3, .pipe, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .log li { grid-template-columns: 1fr; }
  .log li::before, .log li::after { display: none; }
  .code { min-height: 200px; }
  .src { font-size: .72rem; }
}