/* ====================================================================
   PORTFOLIO — thème éditeur "Ayu-ink" (custom)
   Palette, typographie et layout façon IDE.
   ==================================================================== */

:root{
  /* --- fonds --- */
  --bg:        #0b0e14;
  --bg-2:      #0d1017;
  --bg-3:      #11151f;
  --bg-4:      #161b26;
  --panel:     #0e121b;
  --line:      #1b2130;
  --line-2:    #232b3d;

  /* --- texte --- */
  --fg:        #c4c2ba;
  --fg-2:      #9aa1ad;
  --fg-dim:    #5a616e;
  --fg-mute:   #3a4150;

  /* --- syntaxe / accents --- */
  --orange:    #ffb454;   /* accent principal */
  --tomato:    #ff8f40;   /* keywords */
  --yellow:    #e6b673;
  --green:     #aad94c;   /* strings */
  --cyan:      #59c2ff;   /* entities */
  --blue:      #39bae6;
  --purple:    #d2a6ff;   /* constants */
  --red:       #f26d78;
  --comment:   #5c6773;

  --accent:    var(--orange);
  --accent-2:  var(--cyan);

  --glow:      0 0 24px -6px color-mix(in srgb, var(--accent) 55%, transparent);

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Fraunces", Georgia, serif;

  --tb-h: 38px;      /* titlebar */
  --tabs-h: 40px;
  --status-h: 26px;
  --term-h: 210px;
  --ab-w: 52px;
  --sb-w: 240px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* accents alternatifs (bouton ◑) */
body[data-accent="cyan"]{   --accent:#59c2ff; --accent-2:#aad94c; }
body[data-accent="green"]{  --accent:#aad94c; --accent-2:#ffb454; }
body[data-accent="purple"]{ --accent:#d2a6ff; --accent-2:#59c2ff; }
body[data-accent="red"]{    --accent:#ff7a85; --accent-2:#ffb454; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;               /* le scroll vit dans l'éditeur */
}
::selection{ background:color-mix(in srgb,var(--accent) 35%, transparent); color:#fff; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; }

/* scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--fg-mute); }

/* ====================================================================
   FONDS ANIMÉS
   ==================================================================== */
#code-rain{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; opacity:.62;
  mix-blend-mode:screen;
  pointer-events:none;
}
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.5;
}
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-4%,3%) } 40%{ transform:translate(3%,-3%) }
  60%{ transform:translate(-3%,-2%) } 80%{ transform:translate(2%,4%) }
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ====================================================================
   FENÊTRE IDE
   ==================================================================== */
.ide{
  position:relative; z-index:3;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  opacity:1;                               /* visible par défaut (sécurité) */
  animation:ideIn .7s var(--ease);         /* apparition directe, sans écran d'accueil */
}
@keyframes ideIn{ from{ opacity:0; transform:scale(.99); } to{ opacity:1; transform:none; } }

/* --- barre de titre --- */
.titlebar{
  height:var(--tb-h); flex:none;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 12px;
  background:linear-gradient(var(--bg-2),var(--panel));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.traffic{ display:flex; gap:8px; align-items:center; }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; transition:.2s; }
.dot-close{ background:#ff5f57; } .dot-min{ background:#febc2e; } .dot-max{ background:#28c840; }
.traffic:hover .dot{ filter:brightness(1.15); }
.title-center{
  display:flex; align-items:center; gap:8px; justify-self:center;
  font-size:12.5px; color:var(--fg-2);
}
.tb-icon{ color:var(--accent); }
.tb-path{ color:var(--fg); }
.tb-sep,.tb-file{ color:var(--fg-dim); }
.title-actions{ justify-self:end; display:flex; gap:6px; }
.tb-btn{
  width:28px; height:28px; display:grid; place-items:center;
  border:1px solid transparent; border-radius:7px; background:transparent;
  color:var(--fg-dim); font-size:15px; transition:.2s var(--ease);
}
.tb-btn:hover{ color:var(--accent); border-color:var(--line-2); background:var(--bg-3); }

/* --- structure principale --- */
.workbench{ flex:1; display:flex; min-height:0; }

/* --- barre d'activité --- */
.activitybar{
  width:var(--ab-w); flex:none;
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:4px;
}
.ab-item{
  width:40px; height:40px; display:grid; place-items:center;
  background:none; border:none; border-left:2px solid transparent;
  color:var(--fg-mute); transition:.2s var(--ease);
}
.ab-item svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ab-item:hover{ color:var(--fg); }
.ab-item.is-active{ color:var(--accent); border-left-color:var(--accent); }
.ab-spacer{ flex:1; }

/* --- explorateur --- */
.sidebar{
  width:var(--sb-w); flex:none; background:var(--bg-2);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.sb-header{
  padding:11px 16px 9px; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim);
}
.sb-tree{ padding:2px 8px; flex:1; overflow-y:auto; }
.sb-folder{
  display:flex; align-items:center; gap:6px; padding:4px 6px;
  font-size:12px; color:var(--fg-2); letter-spacing:.06em; user-select:none;
}
.sb-folder .caret{ color:var(--fg-dim); font-size:10px; }
.folder-name{ font-weight:600; }
.sb-file{
  display:flex; align-items:center; gap:8px;
  padding:5px 8px 5px 22px; margin:1px 0; border-radius:6px;
  font-size:13px; color:var(--fg-2);
  position:relative; transition:.16s var(--ease);
}
.sb-file:hover{ background:var(--bg-3); color:var(--fg); }
.sb-file.is-active{ background:color-mix(in srgb,var(--accent) 12%, transparent); color:var(--fg); }
.sb-file.is-active::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px;
  background:var(--accent); border-radius:2px;
}
.sb-static{ color:var(--fg-dim); cursor:default; }
.sb-static:hover{ background:transparent; color:var(--fg-dim); }
.fi{
  font-size:9px; font-weight:700; letter-spacing:-.02em;
  width:18px; text-align:center; flex:none;
}
.fi.py{ color:var(--blue); } .fi.md{ color:var(--fg-dim); } .fi.cfg{ color:var(--yellow); }

.sb-status{ border-top:1px solid var(--line); padding:12px 16px; font-size:11.5px; }
.sb-status-row{ display:flex; align-items:center; gap:8px; color:var(--fg-dim); }
.sb-visits{ margin-top:10px; display:flex; flex-direction:column; gap:3px; }
.sb-visits .lbl{ color:var(--fg-mute); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.sb-visits .val{ color:var(--accent); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; text-shadow:var(--glow); }
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 70%,transparent);
  animation:pulse 2s infinite;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent) } 70%{ box-shadow:0 0 0 7px transparent } 100%{ box-shadow:0 0 0 0 transparent } }

/* ====================================================================
   ÉDITEUR
   ==================================================================== */
.editor{ flex:1; display:flex; flex-direction:column; min-width:0; background:transparent; position:relative; }

.tabs{
  height:var(--tabs-h); flex:none; display:flex; align-items:stretch;
  background:var(--bg-2); border-bottom:1px solid var(--line); overflow-x:auto;
}
.tabs::-webkit-scrollbar{ height:0; }
.tab{
  display:flex; align-items:center; gap:8px; padding:0 14px;
  background:transparent; border:none; border-right:1px solid var(--line);
  color:var(--fg-dim); font-size:12.5px; white-space:nowrap; position:relative;
  transition:.16s var(--ease);
}
.tab:hover{ color:var(--fg-2); background:var(--bg-3); }
.tab.is-active{ background:var(--bg); color:var(--fg); }
.tab.is-active::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent);
}
.tab .x{ color:var(--fg-mute); font-size:14px; }
.tab .x:hover{ color:var(--red); }

.editor-scroll{
  flex:1; overflow-y:auto; scroll-behavior:smooth;
  position:relative;
  /* voile dégradé : sombre à gauche (texte lisible),
     transparent à droite (la pluie de code Python respire) */
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 86%, transparent) 0%,
    color-mix(in srgb, var(--bg) 84%, transparent) 52%,
    color-mix(in srgb, var(--bg) 44%, transparent) 78%,
    color-mix(in srgb, var(--bg) 18%, transparent) 100%);
}

/* --- un "document" = une section --- */
.doc{
  display:flex; min-height:100%;
  border-bottom:1px dashed var(--line);
  scroll-margin-top:0;
}
.gutter{
  width:56px; flex:none; border-right:1px solid var(--line);
  background:linear-gradient(90deg,var(--bg-2),transparent);
  counter-reset:line;
}
.code{
  flex:1; min-width:0; padding:30px 42px 64px; max-width:900px;
  counter-reset:line;
}
/* numéros de ligne façon gutter, générés sur .ln et blocs */
.code > *{ position:relative; }
.code > *::before{
  counter-increment:line;
  content:counter(line);
  position:absolute; left:-72px; width:44px; text-align:right;
  color:var(--fg-mute); font-size:12px; opacity:.55;
  user-select:none; pointer-events:none;
}
.code{ padding-left:82px; }

.ln{ margin:0; min-height:1.6em; font-size:13.5px; white-space:pre-wrap; }
.comment{ color:var(--comment); font-style:italic; }
.kw{ color:var(--tomato); }
.op{ color:var(--tomato); }
.cls{ color:var(--cyan); }
.fn{ color:var(--yellow); }
.str{ color:var(--green); }

/* ---- HÉRO ---- */
.hero{ margin:14px 0 6px; }
.hero-kicker{ color:var(--comment); font-size:14px; margin:0 0 4px; }
.hero-kicker .cls{ color:var(--cyan); }
.hero-name{
  font-family:var(--serif); font-optical-sizing:auto;
  font-weight:600; font-size:clamp(52px, 9vw, 116px);
  line-height:.92; margin:.06em 0 .16em; letter-spacing:-.02em;
  color:#fff;
  background:linear-gradient(180deg,#fff 30%, var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 60px color-mix(in srgb,var(--accent) 30%, transparent);
}
.hero-tag{ font-size:15px; margin:0; }
.hero-tag .cls{ color:var(--cyan); }
.hero-typed{ font-size:15px; margin:.15em 0 0; padding-left:2ch; }
.tcursor{ color:var(--accent); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; }
.chip{
  font-size:12px; padding:6px 12px; border:1px solid var(--line-2);
  border-radius:20px; background:var(--bg-2); color:var(--fg-2);
}
.chip-k{ color:var(--accent); margin-right:7px; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 0; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border:1px solid var(--line-2); border-radius:9px;
  background:var(--bg-2); color:var(--fg); font-size:13.5px;
  transition:.24s var(--ease); position:relative; overflow:hidden;
}
.btn:hover{ border-color:var(--accent); color:#fff; transform:translateY(-2px); }
.btn .prompt{ color:var(--accent); }
.btn-primary{
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 22%,var(--bg-2)),var(--bg-2));
  border-color:color-mix(in srgb,var(--accent) 55%, var(--line-2));
  box-shadow:var(--glow);
}
.btn-primary:hover{ box-shadow:0 0 34px -6px var(--accent); }

.prose{ color:var(--fg-2); max-width:64ch; font-size:14px; margin:8px 0 22px; }
.prose p{ margin:.4em 0; }

/* ---- titres de section ---- */
.section-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,54px);
  line-height:1.05; margin:8px 0 30px; color:var(--fg);
}
.section-title em{ font-style:italic; color:var(--accent); }

/* ---- TIMELINE ---- */
.timeline{ list-style:none; margin:0; padding:0 0 0 6px; position:relative; }
.tl-item{ position:relative; padding:0 0 34px 34px; }
.tl-item::before{
  content:""; position:absolute; left:5px; top:6px; bottom:-6px; width:2px;
  background:linear-gradient(var(--line-2),transparent);
}
.tl-item:last-child::before{ display:none; }
.tl-dot{
  position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent); box-shadow:var(--glow);
}
.tl-init{ border-color:var(--fg-dim); box-shadow:none; }
.tl-body{
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; transition:.28s var(--ease);
}
.tl-item:hover .tl-body{ border-color:var(--line-2); transform:translateX(4px); background:var(--bg-3); }
.tl-hash{ color:var(--yellow); font-size:11.5px; }
.tl-year{ color:var(--fg-dim); font-size:11.5px; margin-left:10px; }
.tl-body h3{ margin:8px 0 6px; font-size:17px; color:var(--fg); font-weight:600; }
.tl-body p{ margin:0; color:var(--fg-2); font-size:13.5px; }

/* ---- SKILLS ---- */
.skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px 30px; margin:6px 0 30px; }
.skill-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; font-size:13px; }
.skill-key{ color:var(--green); }
.skill-pct{ color:var(--fg-dim); font-variant-numeric:tabular-nums; }
.skill-bar{ height:8px; background:var(--bg-3); border-radius:20px; overflow:hidden; border:1px solid var(--line); }
.skill-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:20px; transition:width 1.1s var(--ease);
  box-shadow:0 0 12px -2px var(--accent);
}

.tags{ display:flex; flex-wrap:wrap; gap:9px; margin:6px 0 26px; }
.tag{
  font-size:12.5px; padding:6px 13px; border-radius:8px;
  background:var(--bg-2); border:1px solid var(--line);
  color:var(--fg-2); transition:.2s var(--ease);
}
.tag::before{ content:"#"; color:var(--accent); margin-right:3px; }
.tag:hover{ border-color:var(--accent); color:var(--fg); transform:translateY(-2px); }

/* ---- PROJETS ---- */
.projects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:4px 0 20px; }
.project{
  background:linear-gradient(160deg,var(--bg-2),var(--panel));
  border:1px solid var(--line); border-radius:14px; padding:20px;
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  transition:.3s var(--ease);
}
.project::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:radial-gradient(300px 120px at var(--mx,50%) -10%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 70%);
  opacity:0; transition:opacity .3s;
}
.project:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:0 22px 50px -30px #000; }
.project:hover::after{ opacity:1; }
.pj-top{ display:flex; align-items:center; gap:10px; }
.pj-icon{ color:var(--accent); }
.pj-top h3{ margin:0; font-size:16.5px; color:var(--fg); flex:1; }
.pj-star{ color:var(--yellow); font-size:12px; }
.pj-badge{ font-size:10px; letter-spacing:.1em; color:var(--bg); background:var(--accent); padding:2px 7px; border-radius:5px; font-weight:700; }
.pj-desc{ margin:0; color:var(--fg-2); font-size:13.5px; flex:1; }
.pj-stack{ display:flex; flex-wrap:wrap; gap:6px; }
.dep{ font-size:11px; color:var(--purple); background:color-mix(in srgb,var(--purple) 10%,transparent); padding:2px 8px; border-radius:6px; }
.pj-links{ display:flex; gap:16px; padding-top:4px; border-top:1px solid var(--line); margin-top:2px; }
.pj-link{ color:var(--accent); font-size:12.5px; transition:.2s; }
.pj-link:hover{ color:#fff; text-shadow:var(--glow); }
.pj-link.muted{ color:var(--fg-dim); }

/* ---- CONTACT ---- */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:8px 0 30px; }
.contact-card{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:18px 20px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-2); transition:.26s var(--ease); position:relative;
}
.contact-card:hover{ border-color:var(--accent); background:var(--bg-3); transform:translateY(-3px); }
.cc-key{ color:var(--accent); font-size:12px; min-width:64px; }
.cc-key::before{ content:'"'; } .cc-key::after{ content:'":'; }
.cc-val{ color:var(--fg); font-size:13.5px; flex:1; word-break:break-all; }
.cc-arrow{ color:var(--fg-dim); transition:.26s var(--ease); }
.contact-card:hover .cc-arrow{ color:var(--accent); transform:translateX(4px); }

.foot{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
.foot-meta{ color:var(--fg-dim); font-size:12px; margin:6px 0 0; }
.foot-visits b{ color:var(--accent); }

/* --- minimap déco --- */
.minimap{ width:66px; flex:none; background:var(--bg-2); border-left:1px solid var(--line); opacity:.5; }
.minimap canvas{ width:100%; height:100%; display:block; }

/* ====================================================================
   TERMINAL
   ==================================================================== */
.terminal{
  height:var(--term-h); flex:none;
  background:var(--panel); border-top:1px solid var(--line);
  display:flex; flex-direction:column; transition:height .35s var(--ease);
}
.terminal.is-collapsed{ height:34px; }
.term-bar{
  height:34px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid var(--line);
}
.term-tabs{ display:flex; gap:18px; font-size:11px; letter-spacing:.06em; }
.term-tab{ color:var(--fg-dim); }
.term-tab.is-active{ color:var(--fg); }
.term-tab.is-active::before{ color:var(--green); }
.term-btn{ background:none; border:none; color:var(--fg-dim); font-size:14px; padding:2px 6px; }
.term-btn:hover{ color:var(--accent); }
.term-body{
  flex:1; overflow-y:auto; padding:10px 14px; font-size:13px; line-height:1.65;
}
.terminal.is-collapsed .term-body{ display:none; }
.term-line, .term-out, .term-inputline{ white-space:pre-wrap; word-break:break-word; }
.term-user{ color:var(--green); } .term-at{ color:var(--fg-dim); }
.term-host{ color:var(--cyan); } .term-path{ color:var(--fg-dim); margin-right:6px; }
.term-cmd{ color:var(--fg); }
.term-out{ color:var(--fg-2); margin:2px 0 10px; }
.term-out .ok{ color:var(--green); } .term-out .accent{ color:var(--accent); }
.term-out .warn{ color:var(--yellow); } .term-out .big{ color:var(--accent); font-size:15px; font-weight:700; }
.term-inputline{ display:flex; align-items:center; }
#term-input{
  flex:1; background:none; border:none; outline:none; color:var(--fg);
  font-family:var(--mono); font-size:13px; caret-color:transparent;
}
#term-input::placeholder{ color:var(--fg-mute); }
.term-caret{ color:var(--accent); animation:blink 1.05s steps(1) infinite; margin-left:-4px; }

/* ====================================================================
   BARRE D'ÉTAT
   ==================================================================== */
.statusbar{
  height:var(--status-h); flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; font-size:11.5px;
  background:linear-gradient(var(--panel),var(--bg-2));
  border-top:1px solid var(--line); color:var(--fg-2);
}
.st-left,.st-right{ display:flex; align-items:center; gap:16px; }
.st-item{ display:flex; align-items:center; gap:6px; color:var(--fg-dim); }
.st-branch{ color:var(--fg-2); }
.st-live{ color:var(--green); }
.st-visits b{ color:var(--accent); font-variant-numeric:tabular-nums; }

/* ====================================================================
   RÉVÉLATIONS AU SCROLL
   ==================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:1100px){
  .minimap{ display:none; }
}
@media (max-width:768px){
  .activitybar{ display:none; }
  .sidebar{ position:absolute; z-index:20; left:0; top:0; bottom:0; box-shadow:14px 0 40px -20px #000; transform:translateX(-100%); transition:transform .3s var(--ease); }
  .sidebar.open{ transform:none; }
  .code{ padding:22px 18px 54px 52px; }
  .code > *::before{ left:-44px; width:32px; font-size:11px; }
  :root{ --term-h:180px; }
  .title-center .tb-sep, .title-center .tb-file{ display:none; }
  .tabs{ height:44px; }                       /* onglets plus faciles à toucher */
  .tab{ padding:0 16px; font-size:13px; }
  #term-input{ font-size:16px; }              /* évite le zoom auto iOS au focus */
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }
  .contact-card{ padding:16px; }
}
@media (max-width:520px){
  body{ font-size:13px; }
  .hero-name{ font-size:clamp(44px,15vw,80px); }
  .hero-meta{ gap:7px; } .chip{ font-size:11px; padding:5px 10px; }
  .tabs .tab .x{ display:none; }
  .skills, .projects, .contact-grid{ grid-template-columns:1fr; }
  :root{ --term-h:168px; }
  .term-body{ font-size:12.5px; }
  .st-right .st-item:nth-child(n+3){ display:none; }  /* garde le compteur visible */
}

/* ====================================================================
   ACCESSIBILITÉ — mouvement réduit
   ==================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  #code-rain{ display:none; }
  .reveal{ opacity:1; transform:none; }
}