/* Portfolio Sedra Raherinjatovo: styles of the public pages (public/index.html). */
[hidden]{ display:none !important; }
body{ margin:0; }
img{ max-width:100%; }
  /* Layout: résumé sheet. Masthead, index rule, then a 240px fact rail beside a main column of dated entries. */
  :root{
    --paper:#f5f3ee;
    --surface:#ffffff;
    --ink:#1c1a17;
    --ink-soft:#5c584f;
    --ink-faint:#8a8579;
    --line:#dad5c9;
    --accent:#0271b2;   /* sky blue; the original red is kept below as data-accent="red" */
    --accent-ink:#ffffff;
    --ok:#3f7a4f;
    --amber:#a8670f;    /* two more tones for the Formation tiles, beside --accent and --ok */
    --violet:#6f52b8;
    --shadow: 0 1px 0 rgba(28,26,23,.05);
    --cover-bg:#1c1a17;
    --cover-line:#6d685c;
    --radius: 2px;
    --topbar-h: 52px;
    --gutter:clamp(16px, 4vw, 56px);
    --page-max:clamp(940px, 84vw, 1440px);
    --ease-out:cubic-bezier(.16, 1, .3, 1);
    --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
    --lift:0 16px 32px -18px rgba(28, 26, 23, .30), 0 3px 8px -4px rgba(28, 26, 23, .10);
    --font-display:'Archivo', 'Arial Black', Helvetica, Arial, sans-serif;
    --font-body:'IBM Plex Sans', -apple-system, Helvetica, Arial, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#17150f;
      --surface:#201d17;
      --ink:#f1ede3;
      --ink-soft:#b6ae9d;
      --ink-faint:#847d6d;
      --line:#39352a;
      --accent:#5cc8f5;
      --accent-ink:#17150f;
      --ok:#63b374; --amber:#e3a63b; --violet:#ab90ea;
      --shadow: 0 1px 0 rgba(0,0,0,.3);
      --cover-bg:#0e0d09;
      --cover-line:#4a4538;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --paper:#17150f;
    --surface:#201d17;
    --ink:#f1ede3;
    --ink-soft:#b6ae9d;
    --ink-faint:#847d6d;
    --line:#39352a;
    --accent:#5cc8f5;
    --accent-ink:#17150f;
    --ok:#63b374; --amber:#e3a63b; --violet:#ab90ea;
    --shadow: 0 1px 0 rgba(0,0,0,.3);
    --cover-bg:#0e0d09;
    --cover-line:#4a4538;
    color-scheme: dark;
  }

  /* Original red accent, one click away (reset): <html data-accent="red"> */
  :root[data-accent="red"]{ --accent:#b8271b; --accent-ink:#ffffff; }
  @media (prefers-color-scheme: dark){
    :root[data-accent="red"]:not([data-theme="light"]){ --accent:#e2543f; --accent-ink:#17150f; }
  }
  :root[data-accent="red"][data-theme="dark"]{ --accent:#e2543f; --accent-ink:#17150f; }

  .swatch{
    width:9px; height:9px; border-radius:50%; flex:none;
    background:var(--accent);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
  }

  *{ box-sizing:border-box; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:15.5px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }

  /* Animated background (floating molecules, assets/js/molecules.js): behind everything,
     never clickable. The faint grid and the two soft halos follow --accent through CSS;
     the canvas reads --accent itself. Cards keep their own opaque surface above it. */
  .bg-molecules{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:
      radial-gradient(42vmax 42vmax at 8% 12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
      radial-gradient(38vmax 38vmax at 92% 78%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
      linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px);
    background-size:auto, auto, 40px 40px, 40px 40px;
  }
  .bg-molecules canvas{ display:block; width:100%; height:100%; opacity:.5; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bg-molecules canvas{ opacity:.6; } }
  :root[data-theme="dark"] .bg-molecules canvas{ opacity:.6; }

  ::selection{ background:var(--accent); color:var(--accent-ink); }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  .mono{ font-family:var(--font-mono); }

  html{ scrollbar-gutter:stable; }
  /* Fluid container: grows with the screen up to --page-max, with a gutter that
     scales from 16px (phone) to 56px (large screen). Paragraphs keep their own
     reading width (ch), grids and cards use the extra room. */
  .page{
    max-width:calc(var(--page-max) + 2 * var(--gutter));
    margin:0 auto;
    padding-block:calc(var(--topbar-h) + 28px) 64px;
    padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  @media screen and (max-width:420px){
    .page{ padding-block:calc(var(--topbar-h) + 20px) 48px; }
  }

  /* ---------- controls ---------- */
  .controls{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    margin-bottom:28px;
  }
  .ctrl-status{
    margin-right:auto;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--ok);
    opacity:0;
    transition:opacity .2s ease;
    min-width:0;
  }
  .ctrl-status.show{ opacity:1; }
  .ctrl-status.warn{ color:var(--accent); }
  .ctrl-btn{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:var(--surface);
    color:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:7px 12px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    transition:border-color .15s ease, color .15s ease, opacity .15s ease;
  }
  .ctrl-btn:hover{ border-color:var(--accent); color:var(--ink); }
  .ctrl-btn[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }
  .ctrl-btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .ctrl-btn.primary:hover{ opacity:.9; color:var(--accent-ink); }
  .ctrl-btn[aria-busy="true"]{ opacity:.6; cursor:progress; }
  .ctrl-btn svg{ width:12px; height:12px; flex:none; }

  .print-help{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:-12px 0 28px;
    padding:10px 12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    font-size:13.5px;
    color:var(--ink-soft);
  }
  .print-help p{ margin:0; flex:1 1 260px; min-width:0; }
  .print-help .ctrl-btn{ flex:none; }

  /* ---------- masthead ---------- */
  .masthead{
    margin-bottom:52px;
  }
  @keyframes rise{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .masthead, html .pcard, html .pc-item, html .view-enter, html .view-enter .cert, html .view-enter .cert-bar span, html .review, html .xp, html .xp-badge{ animation:none !important; }
    html .xp-stars, html .xp-shine{ display:none; }
    html .pcard:hover .xp{ translate:none; }
    html .view-enter .page-title, html .view-enter .page-lead, html h1.name .ln, html .star.pop, html .view-enter .lvl-tag, html .view-enter .stack-item, html .status .dot::after{ animation:none !important; }
    .js-motion .reveal{ opacity:1 !important; translate:none !important; }
    html .carousel-track{ transition:none; }
    html .view-enter .stack-card, html .stack-grid.refresh .stack-card, html .stack-pop{ animation:none; }
    html .pcard:hover, html .pcard-cta:active{ transform:none; }
    html .view-enter .proj-ico, html .view-enter .fx-cert-bar::after{ animation:none !important; }
    *{ transition-duration:0s !important; }
  }

  .eyebrow-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
  }
  .status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .status .dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--ok);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
    flex:none;
  }
  .tag-mobility{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.03em;
    color:var(--ink-faint);
    border-left:1px solid var(--line);
    padding-left:14px;
  }
  @media screen and (max-width:560px){
    .eyebrow-row{ gap:6px 14px; }
    .tag-mobility{ border-left:0; padding-left:0; }
  }

  h1.name{
    font-family:var(--font-display);
    font-weight:900;
    font-size:clamp(34px, 10vw, 84px);
    line-height:.92;
    letter-spacing:-.01em;
    margin:0 0 6px;
    text-wrap:balance;
  }
  h1.name span{ display:block; }
  h1.name .last{ color:var(--accent); }

  .role-line{
    font-family:var(--font-mono);
    font-size:14px;
    letter-spacing:.03em;
    color:var(--ink-soft);
    margin:0 0 22px;
    text-transform:uppercase;
  }
  .role-line b{ color:var(--ink); font-weight:600; }

  .pitch{
    max-width:58ch;
    font-size:17.5px;
    line-height:1.65;
    color:var(--ink);
    margin:0 0 26px;
    text-wrap:pretty;
  }

  /* ---------- intro grid + profile card ---------- */
  .masthead-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap:40px;
    align-items:start;
  }
  .masthead-text{ min-width:0; }
  .masthead-grid h1.name{ font-size:clamp(34px, 7.2vw, 76px); }
  @media screen and (max-width:880px){
    .masthead-grid{ grid-template-columns:minmax(0, 1fr); gap:0; }
    .masthead-grid h1.name{ font-size:clamp(34px, 10vw, 84px); }
    .pcard{ max-width:360px; margin-bottom:26px; }
  }

  /* Card motion mirrors the ProfileCard component: card fades up 20px in .4s,
     children follow 10px at .1s intervals, hover scales to 1.02 in .2s. */
  .pcard{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform .45s var(--ease-out), border-color .3s ease, box-shadow .45s ease;
  }
  @keyframes pcard-in{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
  }
  html.intro .masthead{ animation:rise .6s var(--ease-out) backwards; }
  html.intro .pcard{ animation:pcard-in .6s var(--ease-out) .1s backwards; }
  html.intro .pc-item{ animation:pcard-item .55s var(--ease-out) backwards; animation-delay:calc(.15s + var(--i, 0) * .07s); }
  @keyframes pcard-item{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (hover:hover) and (pointer:fine){
    .pcard:hover{ transform:translateY(-4px); box-shadow:var(--lift); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
    .pcard:hover .pcard-avatar img{ box-shadow:0 0 0 2px var(--accent); }
  }
  .pcard-cover{
    position:relative;
    height:96px;
    background:var(--cover-bg);
    overflow:hidden;
  }
  .pcard-mono{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    font-family:var(--font-display);
    font-weight:900;
    font-size:112px;
    line-height:1;
    letter-spacing:.02em;
    color:transparent;
    -webkit-text-stroke:1.5px var(--cover-line);
    user-select:none;
  }
  /* cover picture: fills the band exactly, no stretching; the "SR" monogram only shows if it fails to load */
  .pcard-cover-img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:50% 50%; }
  .pcard-body{ padding:0 20px 20px; }
  .pcard-avatar{ position:relative; z-index:1; margin-top:-48px; display:flex; }
  .pcard-avatar img{
    width:96px;
    height:96px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border:4px solid var(--surface);
    background:var(--paper);
    box-shadow:0 0 0 1px var(--line);
    transition:box-shadow .25s ease;
  }
  .pcard-name{
    font-family:var(--font-display);
    font-weight:800;
    font-size:19px;
    letter-spacing:-.005em;
    margin:12px 0 2px;
  }
  .pcard-role{ font-size:13px; color:var(--ink-soft); margin:0; }
  .pcard-tools{ display:flex; align-items:center; gap:10px; margin-top:14px; }
  .pcard-label{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .pcard-tools ul{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
  .pcard-tool{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--paper);
    color:var(--ink-soft);
    transition:border-color .15s ease, color .15s ease;
  }
  .pcard-tool:hover{ border-color:var(--accent); color:var(--ink); }
  .pcard-tool svg{ width:14px; height:14px; }
  .pcard-stats{
    display:flex;
    margin:16px 0 0;
    padding:10px 4px;
    background:var(--paper);
    border-radius:var(--radius);
  }
  .pcard-stat{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; padding:0 4px; }
  .pcard-stat + .pcard-stat{ border-left:1px solid var(--line); }
  .pcard-stat dd{
    order:1;
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
  }
  .pcard-stat dd svg{ width:13px; height:13px; color:var(--ink-faint); flex:none; }
  .pcard-stat dt{ order:2; font-size:10.5px; line-height:1.3; color:var(--ink-faint); }
  .pcard-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:16px;
    padding:11px 14px;
    background:var(--accent);
    color:var(--accent-ink);
    border-radius:var(--radius);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.05em;
    text-transform:uppercase;
    text-decoration:none;
    transition:opacity .15s ease, transform .1s ease;
  }
  .pcard-cta:hover{ opacity:.9; }
  .pcard-cta:active{ transform:scale(.97); }
  .pcard-cta svg{ width:13px; height:13px; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  .contact-rail{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding-top:22px;
    border-top:1px solid var(--line);
  }
  .contact-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--ink-soft);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:8px 12px;
    text-decoration:none;
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    transition:border-color .15s ease, color .15s ease;
  }
  button.contact-item, a.contact-item{ cursor:pointer; }
  button.contact-item:hover, a.contact-item:hover{ border-color:var(--accent); color:var(--ink); }
  .contact-item svg{ width:13px; height:13px; flex:none; transition:color .15s ease, transform .15s ease; }
  a.contact-item:hover svg{ color:var(--accent); transform:translateX(1px); }

  /* ---------- e-mail bubble: just under the address, copy it or write (portfolio.js) ---------- */
  .mail-pop{
    position:absolute; z-index:40; width:min(272px, calc(100vw - 24px));
    display:grid; gap:6px; padding:8px;
    background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--lift);
  }
  .mail-pop-caret{
    position:absolute; top:-6px; width:10px; height:10px; margin-left:-5px; background:var(--surface);
    border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg);
  }
  .mail-pop.is-above .mail-pop-caret{ top:auto; bottom:-6px; transform:rotate(225deg); }
  .mail-pop.is-in{ animation:mail-pop-in .18s var(--ease-out) both; }
  .mail-pop.is-above.is-in{ animation-name:mail-pop-in-up; }
  .mail-pop.is-closing{ animation:mail-pop-out .14s ease-in both; }
  @keyframes mail-pop-in{ from{ opacity:0; transform:translateY(-4px) scale(.96); } }
  @keyframes mail-pop-in-up{ from{ opacity:0; transform:translateY(4px) scale(.96); } }
  @keyframes mail-pop-out{ to{ opacity:0; transform:scale(.97); } }
  .mail-pop-head{ display:flex; align-items:center; justify-content:space-between; padding-left:6px; }
  .mail-pop-kicker{ font:500 10.5px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
  .mail-close{
    width:28px; height:28px; display:grid; place-items:center; border:1px solid transparent; border-radius:var(--radius);
    background:transparent; color:var(--ink-faint); cursor:pointer; transition:color .15s ease, border-color .15s ease;
  }
  .mail-close:hover{ color:var(--ink); border-color:var(--line); }
  .mail-close svg{ width:14px; height:14px; }
  .mail-action{
    display:flex; align-items:center; gap:10px; min-height:42px; padding:6px 12px 6px 6px; text-align:left;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); color:var(--ink);
    font:600 13px/1.25 var(--font-body); text-decoration:none; cursor:pointer;
    transition:border-color .15s ease, opacity .15s ease;
  }
  .mail-action:hover{ border-color:var(--accent); }
  .mail-action:focus-visible, .mail-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .mail-action.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .mail-action.primary:hover{ opacity:.9; }
  .mail-action-ico{
    position:relative; display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%;
    color:var(--accent); background:var(--surface); background:color-mix(in srgb, var(--accent) 12%, transparent);
    transition:color .2s ease, background-color .2s ease;
  }
  .mail-action.primary .mail-action-ico{ color:inherit; background:rgba(255, 255, 255, .2); }
  .mail-action-ico svg{ width:15px; height:15px; transition:opacity .2s ease, transform .35s var(--ease-spring); }
  .mail-action-ico .ico-done{ position:absolute; opacity:0; transform:scale(.4); }
  .mail-action-done{ display:none; color:var(--ok); }
  .mail-action.is-done{ border-color:var(--ok); }
  .mail-action.is-done .mail-action-ico{ color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
  .mail-action.is-done .ico-copy{ opacity:0; transform:scale(.4); }
  .mail-action.is-done .ico-done{ opacity:1; transform:none; }
  .mail-action.is-done .mail-action-label{ display:none; }
  .mail-action.is-done .mail-action-done{ display:block; }
  .mail-status{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .mail-copy-field{ position:fixed; top:0; left:0; opacity:0; pointer-events:none; }
  @media (pointer: coarse){
    .mail-close{ width:44px; height:44px; margin:-6px -6px -6px 0; }
    .mail-action{ min-height:48px; }
  }
  @media (prefers-reduced-motion: reduce){
    .mail-pop.is-in, .mail-pop.is-closing{ animation:none; }
    .mail-action-ico svg{ transition:none; }
  }

  /* ---------- index nav ---------- */
  .index{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin:40px 0 44px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .index a{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--ink-faint);
    padding:12px 18px 12px 0;
    margin-right:18px;
    border-bottom:2px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  .index a:first-child{ padding-left:0; }
  .index a:hover{ color:var(--ink); }
  .index a.active{ color:var(--accent); border-color:var(--accent); }

  /* ---------- layout grid ---------- */
  .grid{
    display:grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap:56px;
    align-items:start;
  }
  .rail{ position:sticky; top:calc(24px + env(safe-area-inset-top, 0px)); display:flex; flex-direction:column; gap:34px; min-width:0; }
  .main{ min-width:0; }
  @media screen and (max-width:760px){
    .grid{ grid-template-columns:minmax(0, 1fr); gap:40px; }
    .rail{ order:2; position:static; }
    .main{ order:1; }
  }

  h2.section-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 16px;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  h2.section-title::before{
    content:"";
    width:16px; height:2px;
    background:var(--accent);
    display:inline-block;
    flex:none;
  }
  .sub-label{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin:0 0 8px;
  }
  .skill-groups{ display:flex; flex-direction:column; gap:16px; }

  .tag-group{ display:flex; flex-wrap:wrap; gap:7px; }
  .tag{
    font-size:12.5px;
    color:var(--ink-soft);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:6px 10px;
    line-height:1.2;
    transition:border-color .15s ease, color .15s ease;
  }
  .tag:hover{ border-color:var(--accent); color:var(--ink); }

  .lang-list, .edu-block{ display:flex; flex-direction:column; gap:10px; }
  .lang-row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:13.5px; border-bottom:1px dotted var(--line); padding-bottom:8px;
  }
  .lang-row .lvl{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent); }

  .edu-block .school{ font-weight:600; font-size:14px; }
  .edu-block .degree{ font-size:13.5px; color:var(--ink-soft); margin-top:2px; }
  .edu-block.courses{ margin-top:14px; }
  .course-list{ margin:4px 0 0; padding-left:16px; display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-soft); }
  .course-list .meta{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .edu-block .meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-top:6px; }

  /* ---------- main column ---------- */
  .main > section{ margin-bottom:54px; }
  .main > section:last-child{ margin-bottom:0; }

  .profile-text{ max-width:64ch; font-size:15.5px; color:var(--ink-soft); margin:0; }
  .profile-text strong{ color:var(--ink); font-weight:600; }

  .exp-list{ display:flex; flex-direction:column; }
  .exp-card{
    display:grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap:20px;
    padding:22px 0;
    border-top:1px solid var(--line);
  }
  .exp-list .exp-card:last-child{ border-bottom:1px solid var(--line); }
  @media screen and (max-width:560px){
    .exp-card{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  }
  .exp-dates{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-faint);
    letter-spacing:.02em;
    padding-top:3px;
  }
  .exp-dates .type{
    display:inline-block;
    margin-top:8px;
    font-size:10.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent);
    border:1px solid currentColor;
    border-radius:var(--radius);
    padding:2px 6px;
  }
  .exp-dates .stack{ display:block; margin-top:8px; line-height:1.5; }
  .exp-role{ font-family:var(--font-display); font-weight:800; font-size:18px; margin:0 0 2px; letter-spacing:-.005em; text-wrap:balance; }
  .exp-company{ font-size:13.5px; color:var(--ink-soft); margin:0 0 12px; }
  .exp-context{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin:-8px 0 12px; }
  .exp-bullets{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
  .exp-bullets li{ font-size:13.8px; color:var(--ink-soft); }
  .exp-bullets b{ color:var(--ink); font-weight:600; }
  .exp-bullets .stat{ color:var(--accent); font-weight:600; font-family:var(--font-mono); font-size:.95em; white-space:nowrap; }

  footer{
    margin-top:64px;
    padding-top:22px;
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:12px;
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-faint);
  }
  footer a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
  footer a:hover{ color:var(--accent); }
  /* ---------- fixed top bar: the menu never moves, only the content changes ---------- */
  .topbar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:30;
    padding-top:env(safe-area-inset-top, 0px);
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{
    max-width:calc(var(--page-max) + 2 * var(--gutter));
    height:var(--topbar-h);
    margin:0 auto;
    display:flex;
    align-items:stretch;
    gap:14px;
    padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  .topbar-home{ flex:none; align-self:center; display:flex; border-radius:50%; }
  .topbar-home img{ width:28px; height:28px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--line); transition:box-shadow .2s ease; }
  .topbar-home:hover img{ box-shadow:0 0 0 2px var(--accent); }
  .topnav{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:stretch;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .topnav::-webkit-scrollbar{ display:none; }
  .topnav a{
    flex:none;
    display:flex;
    align-items:center;
    padding:0 12px;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
    text-decoration:none;
    color:var(--ink-faint);
    transition:color .15s ease, border-color .15s ease;
  }
  .topnav a:hover{ color:var(--ink); }
  .topnav a.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .topnav a:focus-visible{ outline-offset:-4px; }
  @media screen and (max-width:860px){
    /* the menu scrolls sideways on small screens; a soft fade hints at the hidden items */
    .topnav{ -webkit-mask-image:linear-gradient(to right, #000 82%, transparent); mask-image:linear-gradient(to right, #000 82%, transparent); }
  }
  @media screen and (max-width:420px){
    .topbar-inner{ gap:8px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:0; }
    .topnav a{ padding:0 10px; }
  }

  /* ---------- pages (hash routes: #experience, #certifications…) ---------- */
  .view-enter{ animation:rise .45s var(--ease-out) backwards; }
  .mini-head{
    display:flex;
    align-items:center;
    gap:12px;
    width:max-content;
    max-width:100%;
    color:inherit;
    text-decoration:none;
  }
  .mini-head img{
    width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none;
    box-shadow:0 0 0 1px var(--line);
    transition:box-shadow .2s ease;
  }
  .mini-head:hover img{ box-shadow:0 0 0 2px var(--accent); }
  .mini-id{ display:flex; flex-direction:column; min-width:0; }
  .mini-name{ font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.15; }
  .mini-role{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }

  .page-head{ max-width:62ch; margin-bottom:34px; }
  .page-title{
    font-family:var(--font-display);
    font-weight:900;
    font-size:clamp(36px, 6vw, 60px);
    line-height:.95;
    letter-spacing:-.01em;
    margin:0 0 14px;
    text-wrap:balance;
  }
  .page-title:focus{ outline:none; }
  .page-lead{ font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0; }
  .page-body{ max-width:800px; }
  .exp-dates .via{ display:block; margin-top:2px; }

  .ov-list{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
  .formation-more{ margin-top:28px; }
  .ov-row{
    display:grid;
    grid-template-columns:128px minmax(0, 1fr) auto;
    gap:20px;
    align-items:baseline;
    padding:15px 0;
    border-top:1px solid var(--line);
    color:inherit;
    text-decoration:none;
  }
  .ov-label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); transition:color .15s ease; }
  .ov-text{ font-size:14.5px; color:var(--ink-soft); min-width:0; }
  .ov-text b{ color:var(--ink); font-weight:600; }
  .ov-go{ font-family:var(--font-mono); color:var(--ink-faint); transition:transform .15s ease, color .15s ease; }
  a.ov-row:hover .ov-label, a.ov-row:hover .ov-go, a.ov-row:focus-visible .ov-go{ color:var(--accent); }
  a.ov-row:hover .ov-go{ transform:translateX(3px); }
  @media screen and (max-width:560px){
    .ov-row{ grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px; }
    .ov-label{ grid-column:1 / -1; }
  }

  /* certifications */
  .cert-summary{
    display:flex; flex-wrap:wrap; gap:6px 16px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 18px;
  }
  .cert-summary b{ color:var(--accent); font-weight:600; }
  .cert-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  @media screen and (max-width:680px){ .cert-grid{ grid-template-columns:minmax(0, 1fr); } }
  .cert{
    display:flex; flex-direction:column; gap:10px;
    min-width:0;
    padding:16px 18px 12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:border-color .15s ease;
  }
  .cert:hover, .cert:focus-within{ border-color:var(--accent); }
  .cert-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .cert-domain{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
  .cert-seal{ width:16px; height:16px; flex:none; color:var(--accent); }
  .cert-title{ font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.25; letter-spacing:-.005em; margin:0; text-wrap:balance; }
  .cert-score{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:auto; }
  .cert-score-label{ font-size:12px; color:var(--ink-faint); }
  .cert-score-value{ font-family:var(--font-mono); font-weight:600; font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; }
  .cert-bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
  .cert-bar span{ display:block; height:100%; background:var(--accent); transform-origin:left center; transform:scaleX(var(--v)); }
  .cert-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
  .cert-link{
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 0;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .15s ease;
  }
  .cert-link:hover{ border-bottom-color:currentColor; }
  .cert-link svg{ width:12px; height:12px; flex:none; transition:transform .15s ease; }
  .cert-link:hover svg{ transform:translate(2px, -2px); }
  .cert-url{ display:none; }
  .cert-issuer{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .view-enter .cert{ animation:rise .55s var(--ease-out) backwards; animation-delay:calc(var(--i, 0) * 45ms); }
  .view-enter .cert-bar span{ animation:bar-in .7s ease-out both; animation-delay:calc(120ms + var(--i, 0) * 45ms); }
  @keyframes bar-in{ from{ transform:scaleX(0); } }

  /* contact page */
  .contact-list{ margin:0; border-bottom:1px solid var(--line); }
  .contact-row{ display:grid; grid-template-columns:128px minmax(0, 1fr); gap:20px; align-items:center; padding:13px 0; border-top:1px solid var(--line); }
  .contact-row dt{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
  .contact-row dd{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:15px; min-width:0; overflow-wrap:anywhere; }
  .contact-link{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:color .15s ease, border-color .15s ease; }
  .contact-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }
  .contact-cta{ display:inline-flex; margin-top:24px; }
  @media screen and (max-width:560px){ .contact-row{ grid-template-columns:minmax(0, 1fr); gap:4px; } }

  /* ---------- Rate Me ---------- */
  .rate-form{
    display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; min-width:0;
    padding:clamp(20px, 3vw, 34px);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  @media screen and (min-width:720px){
    .rate-form{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:24px; }
    .rate-form > .stars-field, .rate-form > .field-wide, .rate-form > .form-actions, .rate-form > .rate-offline{ grid-column:1 / -1; }
  }
  .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .field-label{
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-soft); padding:0; margin:0 0 2px;
  }
  /* a required field: a small star after its label (CSS, so the FR / EN switch keeps it) */
  .req::after{ content:"\00a0*"; color:#c0392b; font-weight:600; }
  .input{
    font:inherit; font-size:15px; color:var(--ink);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 12px;
    width:100%;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea.input{ resize:vertical; min-height:120px; line-height:1.5; }
  .input:hover{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
  .input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .input[aria-invalid="true"]{ border-color:#c0392b; }
  .input:disabled{ opacity:.55; cursor:not-allowed; }
  .field-hint{ font-size:12.5px; color:var(--ink-faint); margin:0; }
  .field-error{ font-size:12.5px; color:#c0392b; margin:0; }
  .stars-field{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
  .stars-field legend{ width:100%; margin-bottom:6px; }
  .stars-field .field-error{ width:100%; }
  .stars{ display:flex; gap:4px; }
  .star{ display:inline-flex; cursor:pointer; padding:4px; border-radius:var(--radius); color:var(--line); transition:color .12s ease, transform .12s ease; }
  .star svg{ width:34px; height:34px; fill:currentColor; }
  .star.on{ color:var(--accent); }
  .star:hover{ transform:translateY(-2px) scale(1.06); }
  .star.pop{ animation:star-pop .5s var(--ease-spring) backwards; animation-delay:calc(var(--k, 0) * 45ms); }
  @keyframes star-pop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.18); } 100%{ transform:none; } }
  .star-input:focus-visible + .star{ outline:2px solid var(--accent); outline-offset:2px; }
  .star-input:disabled + .star{ cursor:not-allowed; opacity:.55; }
  .stars-value{ font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; user-select:none; }
  .form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .rate-submit{ display:inline-flex; margin-top:0; border:0; cursor:pointer; }
  .rate-submit:disabled{ opacity:.5; cursor:not-allowed; }
  .rate-submit[aria-busy="true"]{ opacity:.7; cursor:progress; }
  .form-status{ margin:0; font-size:13.5px; color:var(--ink-soft); min-width:0; }
  .form-status.ok{ color:var(--ok); }
  .form-status.err{ color:#c0392b; }
  /* Optional title. The field comes first; under it, once a rating is chosen, the ideas float as
     bubbles: pills sized to their text that drift a few pixels up and down, each at its own pace
     (CSS only, paused off screen, still when motion is reduced). A chosen bubble takes the accent
     and a small tick, without changing size, so nothing around it moves. */
  .title-field{ gap:8px; }
  .title-input{ position:relative; min-width:0; }
  .title-input .input{ padding-right:46px; }
  .title-clear{
    position:absolute; top:50%; right:4px; translate:0 -50%;
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
    border:0; border-radius:50%; background:none; color:var(--ink-faint); cursor:pointer;
    transition:color .15s ease, background-color .15s ease;
  }
  .title-clear svg{ width:16px; height:16px; }
  .title-clear:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); }
  .title-ideas{ display:flex; flex-direction:column; gap:4px; min-width:0; animation:ideas-in .45s var(--ease-out) both; }
  @keyframes ideas-in{ from{ opacity:0; translate:0 6px; } }
  .chips-label{ margin:6px 0 0; font-size:12.5px; color:var(--ink-faint); }
  .bubbles{ display:flex; flex-wrap:wrap; gap:10px; min-width:0; padding:8px 4px 6px; }
  .bubbles.is-sizing{ transition:height .36s var(--ease-out); }
  .bubble{
    --amp:-4px; --rot:.3deg; --dur:6.4s;
    display:inline-flex; max-width:100%; min-width:0;
    animation:bubble-float var(--dur) ease-in-out infinite;
    animation-delay:calc(var(--i, 0) * -1.3s);
    animation-play-state:paused;
    transition:opacity .17s ease;
  }
  .bubble:nth-child(3n+2){ --amp:-3px; --rot:-.25deg; --dur:7.2s; }
  .bubble:nth-child(3n){ --amp:-5px; --rot:.2deg; --dur:5.8s; }
  .bubble:has(.chip[aria-pressed="true"]){ --amp:-2px; --rot:0deg; }
  .title-field.is-live .bubble{ animation-play-state:running; }
  .title-field.is-live .bubble:hover, .title-field.is-live .bubble:focus-within{ animation-play-state:paused; }
  .bubble.is-leaving{ opacity:0; pointer-events:none; }
  @keyframes bubble-float{
    0%, 100%{ transform:translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%{ transform:translate3d(0, var(--amp), 0) rotate(var(--rot)) scale(1.012); }
  }
  .chip{
    position:relative;
    font:inherit; font-size:13.5px; line-height:1.3; text-align:left; color:var(--ink);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), transparent 75%),
      color-mix(in srgb, var(--surface) 90%, var(--accent));
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius:999px;
    padding:7px 15px; min-height:36px; max-width:100%; overflow-wrap:anywhere; cursor:pointer;
    box-shadow:0 1px 2px rgba(28, 26, 23, .06), 0 8px 16px -12px color-mix(in srgb, var(--accent) 60%, transparent);
    transition:translate .22s var(--ease-out), scale .22s var(--ease-out), box-shadow .22s ease,
               background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
    animation:bubble-in .5s var(--ease-out) backwards;
    animation-delay:calc(var(--i, 0) * 55ms);
  }
  @keyframes bubble-in{ from{ opacity:0; scale:.86; translate:0 8px; } }
  .chip-sug{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .bubble.is-leaving .chip{ scale:.94; }
  @media (hover: hover){
    .chip:hover{
      border-color:color-mix(in srgb, var(--accent) 60%, var(--line));
      box-shadow:0 2px 4px rgba(28, 26, 23, .08), 0 14px 24px -14px color-mix(in srgb, var(--accent) 75%, transparent);
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference){ .chip:hover{ translate:0 -2px; } }
  .chip:active{ scale:.97; }
  .chip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .chip[aria-pressed="true"]{
    color:var(--accent-ink); background:var(--accent); border-color:var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 12px 22px -12px color-mix(in srgb, var(--accent) 85%, transparent);
  }
  /* the tick: a small round badge on the corner, so the bubble keeps its size */
  .chip[aria-pressed="true"]::before{
    content:''; position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
    background:var(--surface); box-shadow:0 0 0 1.5px var(--accent), 0 2px 6px -2px rgba(28, 26, 23, .3);
    animation:tick-in .35s var(--ease-spring) both;
  }
  .chip[aria-pressed="true"]::after{
    content:''; position:absolute; top:0; right:-1.5px; width:9px; height:5px;
    border:solid var(--accent); border-width:0 0 2px 2px; rotate:-45deg;
    animation:tick-in .35s var(--ease-spring) both;
  }
  @keyframes tick-in{ from{ opacity:0; scale:.4; } }
  .chip:disabled{ opacity:.55; cursor:not-allowed; translate:none; }
  .bubbles.is-stale .chip:not([aria-pressed="true"]){ opacity:.55; }
  .title-note{ margin:0; font-size:12.5px; color:var(--ink-soft); }
  .title-note:empty{ display:none; }
  .sug-line{ margin:0; font-size:12.5px; color:var(--ink-faint); display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:20px; }
  .sug-state:empty{ display:none; }
  .sug-state.busy::before{
    content:''; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%;
    background:var(--accent); vertical-align:1px; animation:sug-pulse 1s ease-in-out infinite;
  }
  @keyframes sug-pulse{ 50%{ opacity:.25; } }
  @media (pointer: coarse){
    .chip{ min-height:44px; padding:10px 16px; }
    .title-input .input{ padding-right:50px; }
    .title-clear{ width:44px; height:44px; right:2px; }
  }
  @media (prefers-reduced-motion: reduce){
    .bubble, .chip, .title-ideas, .chip[aria-pressed="true"]::before, .chip[aria-pressed="true"]::after{ animation:none; }
    .chip{ transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
    .chip:active, .bubble.is-leaving .chip{ scale:none; }
    .bubbles.is-sizing{ transition:none; }
    .sug-state.busy::before{ animation:none; }
  }
  @media print{ .bubble, .chip{ animation:none !important; } }
  /* "Voulez-vous dire …@gmail.com ?": one click uses it, the other keeps the address as typed */
  .email-suggest{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 0; }
  .suggest-btn{
    font:inherit; font-size:13px; color:var(--accent-ink); background:var(--accent); border:1px solid var(--accent);
    border-radius:var(--radius); padding:6px 12px; cursor:pointer; max-width:100%; overflow-wrap:anywhere; text-align:left;
  }
  .suggest-btn.ghost{ color:var(--accent); background:none; }
  .suggest-btn:hover{ filter:brightness(1.08); }
  /* step 2: the fields are only hidden while the code is asked for, never emptied */
  .rate-form.is-verifying > :not(.verify-box):not(.hp){ display:none !important; }
  .verify-box{ display:grid; gap:12px; min-width:0; }
  .verify-box[hidden]{ display:none; }
  .verify-title{ margin:0; font-family:var(--font-display); font-size:clamp(18px, 2.2vw, 22px); line-height:1.25; outline:none; }
  .verify-lead{ margin:0; color:var(--ink-soft); font-size:14px; overflow-wrap:anywhere; }
  .verify-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
  .verify-row[hidden]{ display:none; }
  .verify-row .field{ flex:0 1 220px; }
  .verify-code{ font-family:var(--font-mono); font-size:22px; letter-spacing:.3em; text-align:center; }
  .verify-row .pcard-cta, #verify-link{ border:0; cursor:pointer; margin-top:0; }
  .verify-row .pcard-cta[aria-busy="true"], #verify-link[aria-busy="true"]{ opacity:.7; cursor:progress; }
  .verify-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:0; font-size:13px; color:var(--ink-faint); }
  .verify-actions[hidden]{ display:none; }
  .text-btn{ font:inherit; font-size:13px; color:var(--accent); background:none; border:0; padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .text-btn:disabled{ color:var(--ink-faint); cursor:default; text-decoration:none; }
  @media (pointer: coarse){ .suggest-btn, .text-btn{ min-height:44px; } }
  .rate-offline{ order:-1; display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px dashed var(--line); border-radius:var(--radius); font-size:13.5px; color:var(--ink-soft); }
  .rate-offline p{ margin:0; }

  .reviews{ margin-top:56px; }
  .reviews-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .reviews-heading{ min-width:0; }
  .reviews-heading .section-title{ margin-bottom:6px; }
  .review-title{ margin:0; font-family:var(--font-display); font-weight:800; font-size:15.5px; line-height:1.25; letter-spacing:-.005em; color:var(--ink); }
  .reviews-nav{ display:flex; gap:6px; }
  .reviews-nav .ctrl-btn:disabled{ opacity:.4; cursor:default; border-color:var(--line); color:var(--ink-faint); }
  /* Feedback carousel: a translated row, so its height is set once by the tallest card. */
  .carousel{ --per:3; margin-top:6px; outline:none; }
  .carousel:focus-visible .carousel-viewport{ outline:2px solid var(--accent); outline-offset:-2px; }
  /* padding gives room to the hover lift and shadows; the negative margin keeps the layout unchanged */
  .carousel-viewport{ overflow:hidden; padding:10px 6px 18px; margin:-10px -6px -12px; touch-action:pan-y; }
  .carousel-track{
    display:flex; gap:12px;
    transform:translate3d(0, 0, 0);
    transition:transform .7s ease-in-out;
    will-change:transform;
  }
  .carousel-track.no-anim, .carousel-track.dragging{ transition:none; }
  .review{
    flex:0 0 calc((100% - (var(--per) - 1) * 12px) / var(--per));
    min-width:0;
    display:flex; flex-direction:column; gap:10px;
    padding:18px 20px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:border-color .2s ease;
  }
  .review:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
  .carousel-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px; margin-top:12px; min-height:20px; }
  .carousel-dot{ width:20px; height:20px; padding:0; border:0; background:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
  .carousel-dot::before{ content:""; width:7px; height:7px; border-radius:4px; background:var(--line); transition:background .3s ease, width .45s var(--ease-out); }
  .carousel-dot:hover::before{ background:var(--ink-faint); }
  .carousel-dot[aria-current="true"]::before{ background:var(--accent); width:18px; border-radius:4px; }
  .review-stars{ display:flex; gap:2px; color:var(--accent); }
  .review-stars svg{ width:15px; height:15px; fill:currentColor; }
  .review-stars .off{ color:var(--line); }
  .review-text{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; line-clamp:7; overflow:hidden; }
  .review-text.open{ display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible; }
  .review-more{ align-self:flex-start; margin-top:-4px; padding:2px 0; border:0; background:none; cursor:pointer;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
  .review-more:hover{ text-decoration:underline; text-underline-offset:3px; }
  /* the author on the first line, a little stronger than the message; then the stars and the date */
  .review-name{ margin:0; font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink); overflow-wrap:anywhere; }
  .review-name.is-anon{ color:var(--ink-soft); }
  .review-rate{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:-4px; }
  .review-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
  .reviews-empty{ margin:12px 0 0; padding:18px; border:1px dashed var(--line); border-radius:var(--radius); font-size:14px; color:var(--ink-faint); }

  /* ---------- profile card: stack categories with a shared popover ---------- */
  .pcard-tools{ position:relative; }
  .stack-label{ text-decoration:none; transition:color .15s ease; }
  .stack-label:hover{ color:var(--accent); }
  .stack-chips{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
  button.stack-chip{ padding:0; cursor:pointer; font:inherit; }
  .stack-chip[aria-expanded="true"]{ border-color:var(--accent); color:var(--accent); background:var(--surface); }
  .stack-pop{
    position:absolute;
    left:0; right:0;
    top:calc(100% + 9px);
    z-index:6;
    padding:11px 13px 10px;
    background:var(--surface);
    border:1px solid var(--accent);
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    animation:pop-in .14s ease-out;
  }
  @keyframes pop-in{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
  .stack-pop-caret{
    position:absolute; top:-6px; left:12px;
    width:10px; height:10px;
    background:var(--surface);
    border-left:1px solid var(--accent); border-top:1px solid var(--accent);
    transform:rotate(45deg);
  }
  .stack-pop-title{ margin:0 0 3px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
  .stack-pop-items{ margin:0 0 7px; font-size:13.5px; line-height:1.45; color:var(--ink); }
  .stack-pop-item{ white-space:nowrap; }
  .stack-pop-link{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
  .stack-pop-link:hover{ color:var(--accent); }

  /* home teaser */
  .stack-teaser-text{ margin:0 0 10px; font-size:13.5px; color:var(--ink-soft); }
  .stack-teaser-stats{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:6px; }
  .stack-teaser-stats li{ display:flex; align-items:baseline; gap:8px; font-size:13.5px; color:var(--ink-soft); border-bottom:1px dotted var(--line); padding-bottom:6px; }
  .stack-teaser-stats b{ font-family:var(--font-mono); font-size:15px; color:var(--accent); min-width:2ch; font-variant-numeric:tabular-nums; }

  /* stack page */
  .stack-toolbar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; margin-bottom:20px; }
  .stack-filter{ display:flex; flex-wrap:wrap; gap:6px; }
  .stack-filter .n{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }
  .stack-filter-btn[aria-pressed="true"] .n{ color:var(--accent); }
  .stack-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; font-size:12.5px; color:var(--ink-faint); }
  .stack-legend > span{ display:inline-flex; align-items:center; gap:6px; }
  .lvl-tag{
    flex:none;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; line-height:1;
    padding:3px 6px; border-radius:var(--radius); border:1px solid var(--line); color:var(--ink-faint); white-space:nowrap;
  }
  .lvl-pro{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .lvl-projet{ border-color:var(--accent); color:var(--accent); }
  .stack-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; align-items:start; }
  .stack-card{
    min-width:0;
    padding:16px 18px 8px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:border-color .15s ease;
  }
  .stack-card:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .stack-grid.refresh .stack-card:not([hidden]){ animation:stack-in .32s ease backwards; }
  @keyframes stack-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
  .view-enter .stack-card{ animation:rise .55s var(--ease-out) backwards; animation-delay:calc(var(--i, 0) * 45ms); }
  .stack-card-head{ display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .stack-ico{ display:inline-flex; width:30px; height:30px; flex:none; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--accent); }
  .stack-ico svg{ width:15px; height:15px; }
  .stack-card-title{ margin:0; flex:1; min-width:0; font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.005em; }
  .stack-card-count{ font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
  .stack-list{ list-style:none; margin:0; padding:0; }
  .stack-item{ padding:9px 0; border-bottom:1px dotted var(--line); }
  .stack-item:last-child{ border-bottom:0; }
  .stack-item-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .stack-name{ font-weight:600; font-size:14px; color:var(--ink); min-width:0; }
  .stack-ctx{ margin:3px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-faint); }
  .stack-item:hover .stack-name{ color:var(--accent); }

  /* ---------- portrait: +7 XP badge (decorative), stars that pop around it ---------- */
  .avatar-wrap{ position:relative; width:96px; height:96px; flex:none; }
  .xp{ position:absolute; right:-18px; bottom:4px; z-index:2; transition:translate .35s var(--ease-out); }
  .xp-badge{
    position:relative;
    display:block;
    overflow:hidden;
    padding:3px 8px;
    font-family:var(--font-mono);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.05em;
    line-height:1.2;
    color:var(--accent);
    background:var(--surface);
    border:1px solid var(--accent);
    border-radius:999px;
    white-space:nowrap;
    box-shadow:0 5px 12px -6px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow);
  }
  html.intro .xp{ animation:xp-pop .9s var(--ease-out) 1.05s backwards; }
  @keyframes xp-pop{
    0%{ opacity:0; transform:perspective(220px) translate3d(0, 12px, -30px) rotateX(60deg) scale(.55); }
    55%{ opacity:1; transform:perspective(220px) translate3d(0, -3px, 0) rotateX(-8deg) scale(1.08); }
    78%{ transform:perspective(220px) translate3d(0, 1px, 0) rotateX(3deg) scale(.98); }
    100%{ transform:none; }
  }
  .xp.float .xp-badge{ animation:xp-float 5.2s ease-in-out infinite; }
  @keyframes xp-float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-2.5px); } }
  .pcard:hover .xp{ translate:0 -2px; }
  .xp-shine{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--accent) 30%, transparent) 47%, color-mix(in srgb, var(--surface) 80%, transparent) 52%, transparent 72%);
    transform:translateX(-130%);
  }
  .xp.shine .xp-shine{ animation:xp-shine 1.05s ease-in-out .1s; }
  @keyframes xp-shine{ to{ transform:translateX(130%); } }
  .xp::after{ content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none; opacity:0; }
  .xp.shine::after{ animation:xp-ring 1.1s ease-out; }
  @keyframes xp-ring{
    0%{ opacity:1; box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent); }
    100%{ opacity:0; box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  .xp-stars{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
  .xp-stars i{
    position:absolute; left:-5px; top:-5px; width:10px; height:10px;
    background:var(--accent);
    clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity:0;
  }
  .xp-stars i:nth-child(even){ width:7px; height:7px; left:-3.5px; top:-3.5px; background:color-mix(in srgb, var(--accent) 60%, var(--surface)); }

  /* Larger touch targets on touch screens; the look stays the same. */
  @media (pointer: coarse){
    .ctrl-btn{ min-height:44px; padding-inline:14px; }
    .contact-item{ min-height:44px; }
    .index a{ padding-block:14px; }
    .reviews-nav .ctrl-btn{ width:48px; height:48px; }
    /* the dot stays small; its touch area is 26 x 44 px (the arrows are 48 px) */
    .carousel-dot{ width:26px; height:44px; }
    .carousel-dots{ gap:0; }
    .pcard-tool.stack-chip{ width:44px; height:44px; }
    .pcard-tools ul{ gap:4px; }
    .pcard-cta{ min-height:44px; }
    .review-more, .cert-link, .stack-pop-link{ min-height:40px; display:inline-flex; align-items:center; }
    .star{ padding:5px; }
  }


  /* =====================================================================
     Layout on large screens
     ===================================================================== */
  @media screen and (min-width:1200px){
    .masthead-grid{ grid-template-columns:minmax(0, 1fr) 340px; gap:clamp(48px, 5vw, 96px); }
    .masthead-grid h1.name{ font-size:clamp(60px, 5.4vw, 96px); }
    .pitch{ font-size:18px; }
    .grid{ grid-template-columns:280px minmax(0, 1fr); gap:clamp(56px, 5vw, 88px); }
    .cert-grid{ grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); }
    .stack-grid{ gap:14px; }
  }
  @media screen and (min-width:1600px){
    /* very wide: profile and overview side by side instead of one long column */
    .main{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(48px, 4vw, 80px); align-items:start; }
    .main > section{ margin-bottom:0; }
  }
  /* List pages: title column on the left (sticky), content on the right */
  @media screen and (min-width:1180px){
    .view-split:not([hidden]){
      display:grid;
      grid-template-columns:minmax(250px, 30%) minmax(0, 1fr);
      column-gap:clamp(48px, 5vw, 104px);
      align-items:start;
    }
    .view-split > .page-head{ grid-row:1 / span 8; position:sticky; top:calc(var(--topbar-h) + 36px); margin-bottom:0; max-width:none; }
    .view-split > :not(.page-head){ grid-column:2; min-width:0; }
    .view-split .page-title{ font-size:clamp(40px, 3.4vw, 64px); }
    .view-split .page-body{ max-width:none; }
    .view-split .exp-card{ grid-template-columns:150px minmax(0, 1fr); gap:28px; }
    .view-split .exp-bullets{ max-width:78ch; }
  }
  /* Projects become cards: two per row from tablet width */
  @media screen{
    .proj-list{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
    .proj-list .exp-card, .exp-list.proj-list .exp-card:last-child{
      grid-template-columns:minmax(0, 1fr); gap:14px; align-content:start;
      padding:22px 24px 20px;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .proj-list .exp-dates{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding-top:0; }
    .proj-list .exp-dates .stack, .proj-list .exp-dates .type{ margin-top:0; }
  }
  @media screen and (min-width:900px){
    .proj-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }

  /* =====================================================================
     Motion system: short, eased, once. Content stays readable without it.
     ===================================================================== */
  /* scroll reveal (uses `translate`, so hover `transform` effects stay independent) */
  .js-motion .reveal{ opacity:0; translate:0 18px; }
  .js-motion .reveal.in{ opacity:1; translate:none; transition:opacity .7s var(--ease-out) var(--rd, 0ms), translate .8s var(--ease-out) var(--rd, 0ms); }

  /* titles rise out of a mask */
  .ttl-mask{ overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
  .view-enter .page-title{ animation:ttl-rise .85s var(--ease-out) backwards; }
  .view-enter .page-lead{ animation:rise .7s var(--ease-out) .12s backwards; }
  @keyframes ttl-rise{ from{ transform:translate3d(0, 110%, 0); } }
  h1.name > span{ overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
  h1.name .ln{ display:inline-block; }
  html.intro h1.name .ln{ animation:ttl-rise .95s var(--ease-out) .05s backwards; }
  html.intro h1.name > span + span .ln{ animation-delay:.14s; }

  /* evidence tags wipe in, stack rows follow their card */
  .view-enter .lvl-tag{ animation:tag-wipe .55s var(--ease-out) backwards; animation-delay:calc(260ms + var(--i, 0) * 45ms + var(--j, 0) * 30ms); }
  @keyframes tag-wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
  .view-enter .stack-item{ animation:rise .5s var(--ease-out) backwards; animation-delay:calc(140ms + var(--i, 0) * 45ms + var(--j, 0) * 30ms); }

  /* numbers: counters keep their final width, reels roll each digit */
  .num-anim{ font-variant-numeric:tabular-nums; }
  .reel{ position:relative; display:inline-block; line-height:1.25em; }
  .reel-ghost{ visibility:hidden; }
  .reel-clip{ position:absolute; left:0; right:0; top:0; height:1.25em; overflow:hidden; }
  .reel-strip{ display:block; transition:transform .75s cubic-bezier(.2, .75, .2, 1); }
  .reel-strip > span{ display:block; height:1.25em; line-height:1.25em; text-align:center; }

  /* availability dot: a soft ping */
  .status .dot{ position:relative; }
  .status .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--ok); opacity:0; animation:ping 3.2s cubic-bezier(0, 0, .2, 1) 1.6s infinite; }
  @keyframes ping{ 0%{ transform:scale(1); opacity:.55; } 70%, 100%{ transform:scale(2.8); opacity:0; } }

  /* =====================================================================
     Micro-interactions. Hover effects only where a real pointer exists;
     touch gets :active feedback, focus gets the same cues as hover.
     ===================================================================== */
  a, button, .star{ -webkit-tap-highlight-color:transparent; }

  /* navigation: a sliding ink bar under the active page, a faint line on hover */
  .topnav{ position:relative; }
  .topnav a{ position:relative; }
  .topnav a::after{ content:""; position:absolute; left:12px; right:12px; bottom:-2px; height:2px; background:currentColor; opacity:.3; transform:scaleX(0); transition:transform .35s var(--ease-out); }
  .topnav a.active::after{ opacity:0; }
  .topnav a:active{ color:var(--ink); }
  .nav-ink{ position:absolute; left:0; bottom:0; width:100px; height:2px; background:var(--accent); transform-origin:0 0; pointer-events:none; transition:transform .5s var(--ease-out); }
  .nav-ink.no-anim{ transition:none; }
  .js-motion .topnav a.active{ border-bottom-color:transparent; }

  /* buttons */
  .ctrl-btn{ transition:transform .2s var(--ease-out), border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
  .ctrl-btn:active:not(:disabled){ transform:scale(.96); transition-duration:.08s; }
  .ctrl-btn:disabled{ cursor:not-allowed; }
  .reviews-nav .ctrl-btn{ width:44px; height:44px; padding:0; justify-content:center; font-size:17px; }
  .pcard-cta{ transition:transform .25s var(--ease-out), box-shadow .3s ease, opacity .15s ease; }
  .pcard-cta svg{ transition:transform .3s var(--ease-out); }
  .pcard-cta:active:not(:disabled){ transform:scale(.97); transition-duration:.08s; }
  .ctrl-btn[aria-busy="true"] svg, .rate-submit[aria-busy="true"] svg{ display:none; }
  .ctrl-btn[aria-busy="true"]::before, .rate-submit[aria-busy="true"]::before{ content:""; width:12px; height:12px; flex:none; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* links: an underline that draws itself */
  .cert-link, footer a, .stack-pop-link, .review-more, .stack-label{
    text-decoration:none;
    background-image:linear-gradient(currentColor, currentColor);
    background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
    transition:background-size .35s var(--ease-out), color .2s ease;
  }
  .cert-link:hover, .cert-link:focus-visible, footer a:hover, footer a:focus-visible, .stack-pop-link:hover, .stack-pop-link:focus-visible,
  .review-more:hover, .review-more:focus-visible, .stack-label:hover, .stack-label:focus-visible{ background-size:100% 1px; text-decoration:none; }
  .cert-link:hover{ border-bottom-color:transparent; }
  .contact-link{
    border-bottom:0;
    background-image:linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--line), var(--line));
    background-repeat:no-repeat; background-position:0 100%, 0 100%; background-size:0% 1px, 100% 1px;
    transition:background-size .4s var(--ease-out), color .2s ease;
  }
  .contact-link:hover, .contact-link:focus-visible{ background-size:100% 1px, 100% 1px; }
  .cert-link:active, footer a:active, .contact-link:active, .stack-pop-link:active, .review-more:active{ opacity:.7; }

  /* contact chips and tags */
  .contact-item{ transition:transform .25s var(--ease-out), border-color .2s ease, color .2s ease, box-shadow .25s ease; }
  a.contact-item:active, button.contact-item:active{ transform:scale(.97); transition-duration:.08s; }
  .tag{ transition:transform .25s var(--ease-out), border-color .2s ease, color .2s ease; }
  .tag:active{ transform:scale(.97); }
  .pcard-tool.stack-chip{ transition:transform .3s var(--ease-spring), border-color .2s ease, color .2s ease, background-color .2s ease; }
  .pcard-tool.stack-chip:active{ transform:scale(.92); transition-duration:.08s; }
  .pcard-tool.stack-chip[aria-expanded="true"]{ transform:translateY(-2px); }

  /* overview rows: a panel slides in behind the row */
  @media screen{
    a.ov-row{ position:relative; isolation:isolate; }
    a.ov-row::before{ content:""; position:absolute; z-index:-1; inset:0 calc(-1 * min(14px, var(--gutter) - 6px)); border-radius:var(--radius); background:var(--surface); opacity:0; transform:scaleX(.98); transition:opacity .25s ease, transform .35s var(--ease-out); }
    a.ov-row:active::before, a.ov-row:focus-visible::before{ opacity:1; transform:none; }
    .ov-text{ transition:color .2s ease; }
  }

  /* experience and education rows: lift onto a card, accent rail on the left */
  @media screen{
    .exp-card{ position:relative; isolation:isolate; transition:transform .4s var(--ease-out); }
    .exp-list:not(.proj-list) .exp-card::before{
      content:""; position:absolute; z-index:-1;
      inset:0 calc(-1 * min(20px, var(--gutter) - 6px));
      border-radius:var(--radius);
      background:var(--surface);
      border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
      box-shadow:var(--lift);
      opacity:0;
      transition:opacity .35s var(--ease-out);
    }
    .exp-list:not(.proj-list) .exp-card::after{
      content:""; position:absolute; top:20px; bottom:20px; width:2px; border-radius:2px;
      left:calc(-1 * min(20px, var(--gutter) - 6px));
      background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease-out);
    }
    .exp-dates .type{ transition:background-color .3s ease, color .3s ease; }
    .exp-role{ transition:color .25s ease; }
    .proj-list .exp-card{ overflow:hidden; transition:transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease; }
    .proj-list .exp-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out); }
    .proj-list .exp-dates .stack{ transition:color .25s ease; }
  }

  /* cards: certifications, stack, feedback */
  .cert{ transition:transform .4s var(--ease-out), box-shadow .4s ease, border-color .25s ease; }
  .cert-seal{ transition:transform .5s var(--ease-spring); }
  .cert-score-value{ transition:color .25s ease; }
  .stack-card{ isolation:isolate; transition:transform .4s var(--ease-out), box-shadow .4s ease, border-color .25s ease; }
  .stack-ico{ transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .5s var(--ease-spring); }
  .stack-item{ position:relative; }
  .stack-item::before{ content:""; position:absolute; z-index:-1; inset:0 -10px; border-radius:var(--radius); background:var(--paper); opacity:0; transition:opacity .2s ease; }
  .review{ transition:transform .4s var(--ease-out), box-shadow .4s ease, border-color .25s ease; }
  .review-stars svg{ transition:transform .35s var(--ease-spring); }

  @media (hover:hover) and (pointer:fine){
    .topnav a:hover::after{ transform:scaleX(1); }
    .ctrl-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(28, 26, 23, .4); }
    .ctrl-btn:active:not(:disabled){ transform:translateY(0) scale(.97); }
    .pcard-cta:hover:not(:disabled){ opacity:1; transform:translateY(-2px); box-shadow:0 12px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
    .pcard-cta:hover:not(:disabled) svg{ transform:translateX(2px); }
    a.contact-item:hover, button.contact-item:hover{ transform:translateY(-2px); box-shadow:0 8px 16px -10px rgba(28, 26, 23, .35); }
    .tag:hover{ transform:translateY(-2px); }
    .pcard-tool.stack-chip:hover{ transform:translateY(-2px) scale(1.06); }
    a.ov-row:hover::before{ opacity:1; transform:none; }
    a.ov-row:hover .ov-text{ color:var(--ink); }
    .exp-list:not(.proj-list) .exp-card:hover{ transform:translateY(-3px); }
    .exp-list:not(.proj-list) .exp-card:hover::before{ opacity:1; }
    .exp-list:not(.proj-list) .exp-card:hover::after{ transform:scaleY(1); }
    .exp-card:hover .exp-dates .type{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
    .exp-card:hover .exp-bullets li::marker{ color:var(--accent); }
    .proj-list .exp-card:hover{ transform:translateY(-4px); box-shadow:var(--lift); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
    .proj-list .exp-card:hover::after{ transform:scaleX(1); }
    .proj-list .exp-card:hover .exp-dates .stack{ color:var(--accent); }
    .cert:hover{ transform:translateY(-4px); box-shadow:var(--lift); }
    .cert:hover .cert-seal{ transform:rotate(-14deg) scale(1.15); }
    .cert:hover .cert-score-value{ color:var(--accent); }
    .stack-card:hover{ transform:translateY(-4px); box-shadow:var(--lift); }
    .stack-card:hover .stack-ico{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:rotate(-8deg) scale(1.08); }
    .stack-item:hover::before{ opacity:1; }
    .review:hover{ transform:translateY(-3px); box-shadow:var(--lift); }
    .review:hover .review-stars svg{ transform:scale(1.15); }
    .review:hover .review-stars svg:nth-child(2){ transition-delay:.04s; }
    .review:hover .review-stars svg:nth-child(3){ transition-delay:.08s; }
    .review:hover .review-stars svg:nth-child(4){ transition-delay:.12s; }
    .review:hover .review-stars svg:nth-child(5){ transition-delay:.16s; }
  }
  /* keyboard focus inside a card gets the same lift as hover */
  .cert:focus-within, .review:focus-within{ border-color:var(--accent); }

  /* =====================================================================
     Fuller pages: project previews, the roles index, education extras,
     contact actions. Same lines, colours and type as the rest of the site.
     ===================================================================== */
  /* short pages end at the bottom of the screen instead of halfway down */
  @media screen{
    .page{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
    .page > main{ flex:1 0 auto; }
  }

  /* Projects: title above, a showcase across the full width */
  .view-wide .page-head{ max-width:72ch; }
  .view-wide .page-body{ max-width:none; }
  @media screen and (min-width:700px){ .view-wide .proj-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } }
  @media screen and (min-width:1180px){ .view-wide .proj-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; } }
  @media screen{
    .proj-list .exp-card.has-cover, .exp-list.proj-list .exp-card.has-cover:last-child{ padding-top:0; gap:16px; }
    .proj-list .exp-card > div:last-child{ display:flex; flex-direction:column; }
    .proj-list .exp-company{ margin-bottom:10px; }
  }
  /* the preview: an icon for the kind of work and the project's name, on the site's grid */
  .proj-cover{
    position:relative; overflow:hidden;
    margin:0 -24px; padding:18px 24px;
    height:122px;
    background:
      radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
      linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px),
      var(--paper);
    background-size:auto, 22px 22px, 22px 22px, auto;
    background-position:0 0, -1px -1px, -1px -1px, 0 0;
    border-bottom:1px solid var(--line);
  }
  .proj-ico{
    position:relative; z-index:1;
    width:44px; height:44px; display:grid; place-items:center;
    border-radius:12px;
    background:var(--surface); color:var(--accent);
    border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    box-shadow:0 6px 16px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  .proj-ico svg{ width:22px; height:22px; }
  @media screen and (max-width:560px){ .proj-cover{ height:96px; padding-block:16px; } }
  .proj-mark{
    position:absolute; left:84px; right:20px; bottom:14px;
    font-family:var(--font-display); font-weight:900; line-height:1.1; letter-spacing:-.02em;
    font-size:clamp(28px, 2.5vw, 40px); text-align:right; white-space:nowrap; overflow:hidden;
    color:color-mix(in srgb, var(--accent) 30%, transparent);
    -webkit-mask-image:linear-gradient(to left, #000 72%, transparent); mask-image:linear-gradient(to left, #000 72%, transparent);
  }
  @media screen{
    .proj-cover{ transition:background-position .9s var(--ease-out); }
    .proj-ico{ transition:transform .5s var(--ease-spring), background-color .3s ease, color .3s ease, border-color .3s ease; }
    .proj-mark{ transition:transform .7s var(--ease-out), color .3s ease; }
    .view-enter .proj-cover .proj-ico{ animation:rise .6s var(--ease-out) backwards; animation-delay:calc(120ms + var(--n, 0) * 60ms); }
  }
  /* a long card: its first three points on screen, the others behind "Voir le détail" (all printed) */
  @media screen{ .proj-list .exp-card:not(.is-open) .exp-bullets > li.is-more{ display:none; } }
  @media screen and (prefers-reduced-motion:no-preference){ .proj-list .exp-card.is-open .exp-bullets > li.is-more{ animation:rise .45s var(--ease-out) backwards; } }
  .proj-more{
    align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
    margin-top:12px; padding:4px 0; border:0; background:none; cursor:pointer;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  }
  .proj-more svg{ width:12px; height:12px; transition:transform .3s var(--ease-out); }
  .proj-more[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .proj-more:hover span{ text-decoration:underline; text-underline-offset:3px; }
  @media (pointer:coarse){ .proj-more{ min-height:44px; } }
  /* the project's code repository, when the admin gave its link */
  .exp-link{
    align-self:flex-start; display:inline-flex; align-items:center; gap:7px; margin-top:12px;
    font-size:13px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
    transition:color .2s ease, border-color .2s ease;
  }
  .exp-link .brand{ color:var(--ink-soft); }
  .exp-link:hover, .exp-link:focus-visible{ color:var(--accent); border-bottom-color:var(--accent); }
  @media (pointer:coarse){ .exp-link{ min-height:44px; } }
  /* a card alone on the last row takes the whole row: the preview on the left, the text beside it */
  @media screen and (min-width:700px) and (max-width:1179.98px){
    .view-wide .proj-list > .exp-card.has-cover:last-child:nth-child(2n+1){ grid-column:1 / -1; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); column-gap:28px; padding-top:22px; }
    .view-wide .proj-list > .exp-card.has-cover:last-child:nth-child(2n+1) > .proj-cover{ grid-row:1 / span 2; height:auto; min-height:150px; margin:-22px 0 -20px -24px; border-bottom:0; border-right:1px solid var(--line); }
  }
  @media screen and (min-width:1180px){
    .view-wide .proj-list > .exp-card.has-cover:last-child:nth-child(3n+1){ grid-column:1 / -1; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); column-gap:32px; padding-top:22px; }
    .view-wide .proj-list > .exp-card.has-cover:last-child:nth-child(3n+1) > .proj-cover{ grid-row:1 / span 2; height:auto; min-height:150px; margin:-22px 0 -20px -24px; border-bottom:0; border-right:1px solid var(--line); }
  }
  @media print{ .proj-more{ display:none !important; } }
  @media (hover:hover) and (pointer:fine){
    .proj-list .exp-card:hover .proj-cover{ background-position:0 0, 10px 10px, 10px 10px, 0 0; }
    .proj-list .exp-card:hover .proj-ico{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:rotate(-6deg) scale(1.06); }
    .proj-list .exp-card:hover .proj-mark{ transform:translateX(-8px); color:color-mix(in srgb, var(--accent) 36%, transparent); }
  }

  /* Experience: the roles, under the page title on large screens; the one in view is marked */
  .exp-index{ display:none; }
  @media screen and (min-width:1180px){
    .exp-index{ display:block; margin-top:34px; }
    .exp-index ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
    .exp-index button{
      position:relative; display:flex; flex-direction:column; gap:2px; width:100%;
      padding:9px 0 9px 18px; margin:0;
      background:none; border:0; text-align:left; cursor:pointer; color:var(--ink-soft); font:inherit;
      transition:color .2s ease;
    }
    .exp-index button::before{
      content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:2px; border-radius:2px;
      background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease-out);
    }
    .exp-index .xi-name{ font-size:14px; font-weight:600; line-height:1.3; }
    .exp-index .xi-date{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
    .exp-index button:hover, .exp-index button[aria-current]{ color:var(--ink); }
    .exp-index button[aria-current]::before{ transform:scaleY(1); }
    .exp-index button[aria-current] .xi-date{ color:var(--accent); }
  }
  @media screen and (min-width:1180px) and (pointer:coarse){ .exp-index button{ min-height:44px; } }

  /* Education: the certificates and languages, next to the degree */
  .formation-extra{ display:grid; grid-template-columns:minmax(0, 1fr); gap:34px; margin-top:42px; }
  @media screen and (min-width:900px){ .formation-extra{ grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:clamp(32px, 4vw, 64px); } }
  .fx-block .section-title{ margin-bottom:14px; }
  .fx-certs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .fx-cert{
    display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:4px 16px;
    padding:11px 0 12px; border-top:1px solid var(--line);
    color:inherit; text-decoration:none;
  }
  .fx-certs li:last-child .fx-cert{ border-bottom:1px solid var(--line); }
  .fx-cert-title{ font-size:14px; color:var(--ink); min-width:0; }
  .fx-cert-score{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
  .fx-cert-bar{ grid-column:1 / -1; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
  .fx-cert-bar::after{ content:""; display:block; height:100%; background:var(--accent); transform-origin:left center; transform:scaleX(var(--v)); }
  .view-enter .fx-cert-bar::after{ animation:bar-in .8s ease-out both; animation-delay:calc(200ms + var(--i, 0) * 50ms); }
  @media screen{ .fx-cert{ transition:padding-left .3s var(--ease-out); } .fx-cert-title{ transition:color .2s ease; } }
  @media (hover:hover) and (pointer:fine){
    .fx-cert:hover{ padding-left:6px; }
    .fx-cert:hover .fx-cert-title{ color:var(--accent); }
  }
  @media (pointer:coarse){ .fx-cert{ min-height:44px; } }

  /* Contact: the actions side by side, then the time where Sedra works */
  .contact-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; }
  .contact-actions .contact-cta{ margin-top:0; }
  .contact-actions .ctrl-btn{ min-height:44px; padding-inline:16px; text-decoration:none; }
  .contact-actions .ctrl-btn svg{ width:14px; height:14px; }
  .contact-time{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
    margin:26px 0 0; padding:14px 16px;
    font-size:14px; color:var(--ink-soft);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    width:max-content; max-width:100%;
  }
  .contact-time b{ font-family:var(--font-mono); font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; }
  .contact-time .time-zone{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-faint); }
  .time-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }

  /* =====================================================================
     Official marks (assets/js/brands.js): one size, in the text colour at rest, in their own
     colour when their row or card is hovered. Very light marks (Linux, JavaScript) stay in the
     text colour on light backgrounds, very dark ones on dark backgrounds.
     ===================================================================== */
  .brand{ width:16px; height:16px; flex:none; display:inline-block; vertical-align:-3px; overflow:visible; }
  .brand.is-color{ color:var(--b, currentColor); }
  .brand-dot{ width:16px; height:16px; flex:none; display:inline-grid; place-items:center; }
  .brand-dot::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--ink-faint); }
  @media screen{
    .brand{ transition:color .25s ease, transform .35s var(--ease-out); }
    .brand rect{ transition:fill .25s ease; }
  }
  .stack-item-top{ justify-content:flex-start; }
  .stack-item-top .brand, .stack-item-top .brand-dot{ margin-right:-2px; }
  .stack-item-top .brand{ color:var(--ink-soft); }
  .stack-name{ margin-right:auto; }
  .cert-summary .has-brand{ display:inline-flex; align-items:center; gap:6px; }
  .cert-summary .brand{ width:14px; height:14px; }
  .cert-top .brand.cert-seal{ width:16px; height:16px; color:var(--ink-soft); }
  /* contact: the logo stays beside its link, a long address wraps inside the link */
  .contact-row dd.has-brand{ flex-wrap:nowrap; align-items:flex-start; }
  .contact-row dd.has-brand .brand{ color:var(--ink-soft); margin-top:3.5px; }
  .contact-row dd.has-brand .contact-link{ min-width:0; }
  .stack-pop-item .brand{ width:13px; height:13px; margin-right:5px; vertical-align:-2px; }
  /* project previews: the technologies, top right */
  .proj-tech{ position:absolute; top:22px; right:20px; z-index:1; display:flex; gap:10px; color:var(--ink-soft); }
  .proj-tech .brand{ width:20px; height:20px; }
  @media (hover:hover) and (pointer:fine){
    .has-brand:hover .brand:not(.b-ms), .cert:hover .brand:not(.b-ms), .proj-list .exp-card:hover .proj-tech .brand:not(.b-ms){ color:var(--b, currentColor); }
    .has-brand:hover .brand, .cert:hover .brand{ transform:scale(1.08); }
    .has-brand:hover .b-ms rect:nth-child(1), .cert:hover .b-ms rect:nth-child(1){ fill:#F25022; }
    .has-brand:hover .b-ms rect:nth-child(2), .cert:hover .b-ms rect:nth-child(2){ fill:#7FBA00; }
    .has-brand:hover .b-ms rect:nth-child(3), .cert:hover .b-ms rect:nth-child(3){ fill:#00A4EF; }
    .has-brand:hover .b-ms rect:nth-child(4), .cert:hover .b-ms rect:nth-child(4){ fill:#FFB900; }
    a.contact-item.has-brand:hover .brand{ transform:none; }
  }
  /* readable in both themes: light marks on light pages, dark marks on dark pages keep the text colour */
  :root[data-theme="light"] .brand.b-light, :root[data-theme="dark"] .brand.b-dark{ --b:currentColor !important; }
  @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .brand.b-light{ --b:currentColor !important; } }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand.b-dark{ --b:currentColor !important; } }

  /* =====================================================================
     Interface icons (assets/icons, Uicons by Flaticon): drawn in the text colour through a mask
     ===================================================================== */
  .fx-ico{ display:block; width:26px; height:26px; flex:none; background:currentColor;
    -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
  .fx-ico-graduation-cap{ --ico:url(../icons/graduation-cap.svg); }
  .fx-ico-phone-call{ --ico:url(../icons/phone-call.svg); }
  .fx-ico-laptop-code{ --ico:url(../icons/laptop-code.svg); }
  .fx-ico-diploma{ --ico:url(../icons/diploma.svg); }
  .fx-ico-chart-line-up{ --ico:url(../icons/chart-line-up.svg); }
  .fx-ico-trophy{ --ico:url(../icons/trophy.svg); }
  .fx-ico-language{ --ico:url(../icons/language.svg); }

  /* Education: the page's figures in tiles under the title (left column on wide screens) */
  .fx-stats{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:30px; }
  .fx-stat{
    --t:var(--accent);
    position:relative; display:flex; flex-direction:column; gap:5px; min-width:0;
    padding:16px 16px 15px; border-radius:12px;
    background:color-mix(in srgb, var(--t) 7%, var(--surface));
    border:1px solid color-mix(in srgb, var(--t) 26%, var(--line));
  }
  .fx-stat[data-tone="green"]{ --t:var(--ok); }
  .fx-stat[data-tone="amber"]{ --t:var(--amber); }
  .fx-stat[data-tone="violet"]{ --t:var(--violet); }
  .fx-stat-wide{ grid-column:1 / -1; }
  .fx-stat .fx-ico{ color:var(--t); margin-bottom:8px; }
  .fx-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px, 2.3vw, 36px); line-height:1; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
  .fx-lbl{ font-size:13px; line-height:1.4; color:var(--ink-soft); overflow-wrap:anywhere; }
  .fx-kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--t); }
  .fx-title{ font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.25; color:var(--ink); }
  .fx-note{ font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--ink-faint); }
  @media screen and (prefers-reduced-motion:no-preference){
    .fx-stat{ transition:transform .35s var(--ease-out), box-shadow .35s ease, border-color .25s ease; }
  }
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .fx-stat:hover{ transform:scale(1.04); box-shadow:var(--lift); border-color:color-mix(in srgb, var(--t) 55%, var(--line)); z-index:1; }
  }

  /* Contact: a terminal under the title (after the details on narrow screens), always dark */
  .term{ position:relative; isolation:isolate; margin-top:34px; max-width:640px; }
  .term::before{
    content:""; position:absolute; inset:-22px; z-index:-1; pointer-events:none; border-radius:40px; filter:blur(26px);
    background:radial-gradient(70% 70% at 15% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  }
  .term-frame{ overflow:hidden; border-radius:16px; border:1px solid #2d2a22; background:#15130e; box-shadow:0 28px 70px -36px rgba(0,0,0,.65); }
  .term-bar{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:#1b1912; border-bottom:1px solid #2a271f; }
  .term-dots{ display:flex; gap:7px; }
  .term-dots i{ width:10px; height:10px; border-radius:50%; background:#f87171; }
  .term-dots i:nth-child(2){ background:#fbbf24; }
  .term-dots i:nth-child(3){ background:#34d399; }
  .term-title{ font-family:var(--font-mono); font-size:11px; color:#958d7c; }
  .term-body{ padding:15px 18px 17px; font-family:var(--font-mono); font-size:12.5px; line-height:1.6; color:#e9e4d8; }
  .term-line{ white-space:pre-wrap; overflow-wrap:anywhere; }
  .term-line.wait{ visibility:hidden; }
  .term-line + .term-in{ margin-top:5px; }
  .term-prompt b{ color:#34d399; font-weight:600; }
  .term-user{ color:#7dd3fc; }
  .term-dir{ color:#958d7c; }
  .term-cmd{ color:#f5d0fe; }
  .t-rest{ visibility:hidden; }
  .term-out{ color:#cfc8b8; }
  .term-out.hi{ color:#fff; font-weight:600; }
  .term-out.info{ color:#7dd3fc; }
  .term-out.ok{ color:#86efac; }
  .term-out.muted{ color:#958d7c; }
  .term-out.cta{ margin-top:2px; color:#fde68a; }
  /* the cursor takes no room: the lines never move while typing */
  .term-cursor{ display:inline-block; width:.62em; height:1.15em; margin-right:-.62em; vertical-align:-.2em; border-radius:2px; background:#e9e4d8; opacity:.9; }
  @media screen and (prefers-reduced-motion:no-preference){ .term-cursor{ animation:term-blink 1.04s steps(1) infinite; } }
  @keyframes term-blink{ 50%{ opacity:.2; } }
  @media screen and (max-width:560px){ .term-body{ padding:14px 14px 16px; font-size:12px; } .term::before{ inset:-12px; } }
  /* wide screens: the terminal fills the column under the title, beside the details */
  @media screen and (min-width:1180px){
    .view-split[data-view="contact"] > .page-head{ grid-row:1; position:static; }
    .view-split[data-view="contact"] > .page-body{ grid-row:1 / span 2; }
    .view-split[data-view="contact"] > .term{ grid-column:1; grid-row:2; align-self:start; margin-top:34px; max-width:none; }
  }

  /* Rate Me: a face under the title that reacts to the stars of the form. Only where the column
     beside the form exists (wide screens); decorative, never printed. */
  .mood{ display:none; }
  @media screen and (min-width:1180px){
    .mood{
      --t:#f2c94c;
      position:relative; isolation:isolate; overflow:hidden;
      display:flex; flex-direction:column; align-items:center; gap:8px;
      margin-top:34px; padding:30px 20px 22px;
      border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow);
    }
  }
  .mood[data-n="1"]{ --t:#e8695c; }
  .mood[data-n="2"]{ --t:#f09a52; }
  .mood[data-n="3"]{ --t:#f2c94c; }
  .mood[data-n="4"]{ --t:#9fd36b; }
  .mood[data-n="5"]{ --t:#4fc48a; }
  .mood::before{ content:""; position:absolute; inset:0; z-index:-1; transition:opacity .4s ease;
    background:radial-gradient(75% 65% at 50% 32%, color-mix(in srgb, var(--t) 26%, transparent), transparent 72%); }
  .mood-face{ width:150px; height:150px; overflow:visible; }
  .mood-head{ fill:var(--t); stroke:color-mix(in srgb, var(--t) 70%, #1c1a17); stroke-width:2; transition:fill .35s ease, stroke .35s ease; }
  .mood-eye ellipse{ fill:#fff; }
  .mood-pupil{ fill:#1c1a17; transition:opacity .2s ease; }
  .mood.squint .mood-pupil{ opacity:0; }
  .mood.squint .mood-eye ellipse{ fill:#1c1a17; }
  .mood-mouth, .mood-brow{ fill:none; stroke:#1c1a17; stroke-linecap:round; }
  .mood-mouth{ stroke-width:5.5; }
  .mood-brow{ stroke-width:4.5; }
  .mood-cheek{ fill:#ff8aa5; opacity:0; transition:opacity .35s ease; }
  .mood[data-n="4"] .mood-cheek, .mood[data-n="5"] .mood-cheek{ opacity:.75; }
  .mood-eye{ transform-box:fill-box; transform-origin:center; transition:transform .09s ease; }
  .mood-face.blink .mood-eye{ transform:scaleY(.12); }
  .mood-word{ margin:0; min-height:1.35em; font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.005em; color:var(--ink); }
  .mood-sparks{ position:absolute; left:50%; top:105px; width:0; height:0; pointer-events:none; }
  .mood-sparks i{ position:absolute; left:-5px; top:-5px; width:10px; height:10px; opacity:0; background:var(--t);
    clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
  @media screen and (prefers-reduced-motion:no-preference){
    .mood-face{ animation:mood-float 4.5s ease-in-out infinite; }
    .mood.cheer .mood-face{ animation:mood-hop .6s var(--ease-spring) 2; }
    .mood.cheer .mood-sparks i{ animation:mood-spark .9s var(--ease-out) forwards; }
    .mood.cheer .mood-sparks i:nth-child(2n){ animation-delay:.08s; }
  }
  .mood-sparks i:nth-child(1){ --x:-92px; --y:-62px; } .mood-sparks i:nth-child(2){ --x:88px; --y:-70px; }
  .mood-sparks i:nth-child(3){ --x:-104px; --y:8px; }  .mood-sparks i:nth-child(4){ --x:100px; --y:4px; }
  .mood-sparks i:nth-child(5){ --x:-64px; --y:-104px; } .mood-sparks i:nth-child(6){ --x:58px; --y:-108px; }
  .mood-sparks i:nth-child(7){ --x:-84px; --y:64px; }  .mood-sparks i:nth-child(8){ --x:82px; --y:60px; }
  @keyframes mood-float{ 50%{ transform:translateY(-5px); } }
  @keyframes mood-hop{ 40%{ transform:translateY(-14px) scale(1.04); } }
  @keyframes mood-spark{ 0%{ opacity:0; transform:translate(0, 0) scale(.4) rotate(0deg); } 25%{ opacity:1; }
    100%{ opacity:0; transform:translate(var(--x), var(--y)) scale(1.3) rotate(140deg); } }
  @media print{ .mood{ display:none !important; } }

  /* ---------- print / PDF (A4) ---------- */
  @page{ size:A4; margin:13mm 14mm 14mm; }
  @media print{
    /* Force the light palette whatever theme is active on screen. */
    :root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
      --paper:#ffffff;
      --surface:#ffffff;
      --ink:#16140f;
      --ink-soft:#3a372f;
      --ink-faint:#625d52;
      --line:#cfc9bc;
      --accent:#0271b2;
      --accent-ink:#ffffff;
      --ok:#3f7a4f;
      color-scheme: light;
    }
    :root[data-accent="red"], :root[data-accent="red"]:not([data-theme="light"]), :root[data-accent="red"][data-theme="dark"]{
      --accent:#b8271b;
      --accent-ink:#ffffff;
    }
    html, body{ background:#fff !important; }
    body{ font-size:10pt; line-height:1.45; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .controls, .print-help, .index, .mail-pop, .ctrl-status, .no-print, .bg-molecules{ display:none !important; }
    .page{ max-width:none; margin:0; padding:0 !important; }
    .masthead{ animation:none !important; opacity:1 !important; transform:none !important; margin-bottom:0; }
    *{ transition:none !important; animation:none !important; }

    .eyebrow-row{ margin-bottom:8px; gap:10px; }
    .status, .tag-mobility{ font-size:7.5pt; }
    .tag-mobility{ padding-left:10px; }
    h1.name{ font-size:36pt; margin-bottom:4px; }
    .role-line{ font-size:9pt; margin-bottom:8px; }
    .pitch{ font-size:10pt; max-width:none; margin-bottom:10px; }
    .contact-rail{ padding-top:9px; gap:6px; }
    .contact-item{ padding:3px 8px; font-size:8.5pt; }

    /* On paper the profile card keeps only the round photo beside the name. */
    .masthead-grid{ grid-template-columns:minmax(0, 1fr) 32mm; gap:8mm; align-items:start; }
    .masthead-grid h1.name{ font-size:36pt; }
    .pcard{ border:0; box-shadow:none; background:none; overflow:visible; transform:none !important; }
    .pcard-cover, .pcard-name, .pcard-role, .pcard-tools, .pcard-stats, .pcard-cta{ display:none !important; }
    .pcard-body{ padding:0; }
    .pcard-avatar{ margin:0; }
    .pcard-avatar img{ width:32mm; height:32mm; border:0; box-shadow:0 0 0 .5pt var(--line); }
    .exp-context{ font-size:7.5pt; margin:-3px 0 4px; }

    .grid{ display:grid; grid-template-columns:44mm minmax(0, 1fr); gap:7mm; margin-top:7mm; align-items:start; }
    .rail{ position:static; order:0; gap:14px; }
    .rail > div{ break-inside:avoid; page-break-inside:avoid; }
    .main{ order:0; }
    .main > section{ margin-bottom:14px; }
    h2.section-title{ font-size:9pt; margin-bottom:8px; break-after:avoid; page-break-after:avoid; }
    .skill-groups{ gap:9px; }
    .sub-label{ font-size:7pt; margin-bottom:4px; }
    .tag-group{ gap:4px; }
    .tag{ font-size:8pt; padding:2px 6px; }
    .lang-row{ font-size:9pt; padding-bottom:4px; }
    .lang-row .lvl{ font-size:8pt; }
    .edu-block .school{ font-size:9.5pt; }
    .edu-block .degree{ font-size:9pt; }
    .course-list{ font-size:8.5pt; gap:2px; }
    .course-list .meta{ font-size:7.5pt; }

    .profile-text{ font-size:9.3pt; max-width:none; }
    .exp-card{ grid-template-columns:21mm minmax(0, 1fr); gap:3.5mm; padding:7px 0; break-inside:avoid; page-break-inside:avoid; }
    /* Long entries may continue on the next page, but never mid-bullet or right after their title. */
    .exp-card:has(.exp-bullets li:nth-child(5)){ break-inside:auto; page-break-inside:auto; }
    .exp-dates{ font-size:7.5pt; padding-top:2px; }
    .exp-dates .type{ font-size:6.5pt; margin-top:4px; padding:1px 4px; }
    .exp-dates .stack{ margin-top:4px; }
    .exp-role{ font-size:11pt; break-after:avoid; page-break-after:avoid; }
    .exp-company{ font-size:8.8pt; margin-bottom:4px; break-after:avoid; page-break-after:avoid; }
    .exp-bullets{ gap:1px; padding-left:13px; }
    .exp-bullets li{ font-size:8.8pt; line-height:1.38; break-inside:avoid; page-break-inside:avoid; }
    .tag:hover, .contact-item:hover{ border-color:var(--line); }

    footer{ display:none !important; }
    /* screen extras: drawn previews, the roles index, the education extras, contact actions */
    .proj-cover, .exp-index, .formation-extra, .contact-actions, .contact-time, .fx-stats, .term{ display:none !important; }
    /* marks: the CV prints as before, except the LinkedIn / GitHub links, which keep their logo */
    .brand, .brand-dot{ display:none !important; }
    .contact-item .brand, .cert-top .brand{ display:inline-block !important; }

    /* Paper gets the whole résumé: every page except Contact, in reading order. */
    html .view[hidden], html .masthead[hidden]{ display:block !important; }
    .mini-head, .overview, .page-lead, .formation-more, html body .view[data-view="contact"], html body .view[data-view="rateme"], .topbar, .xp, .nav-ink{ display:none !important; }
    .status .dot::after{ display:none; }
    .js-motion .reveal{ opacity:1 !important; translate:none !important; }
    .ttl-mask, h1.name > span{ overflow:visible; }
    .avatar-wrap{ width:auto; height:auto; }
    .stack-teaser, .stack-pop, .stack-toolbar{ display:none !important; }
    .view[data-view="accueil"] .rail{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .view[data-view="accueil"] .rail > div:first-child{ grid-column:auto; }
    .stack-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.5mm; }
    .stack-card{ padding:5px 8px 2px; box-shadow:none; break-inside:avoid; page-break-inside:avoid; }
    .stack-card-head{ padding-bottom:3px; gap:6px; }
    .stack-ico{ width:15px; height:15px; }
    .stack-ico svg{ width:9px; height:9px; }
    .stack-card-title{ font-size:9pt; }
    .stack-card-count{ font-size:7pt; }
    .stack-item{ padding:2px 0; }
    .stack-name{ font-size:8.3pt; }
    .stack-ctx{ font-size:7pt; margin-top:0; }
    .lvl-tag{ font-size:5.8pt; padding:1px 3px; }
    .view + .view{ margin-top:5mm; }
    .page-head{ max-width:none; margin:0 0 6px; }
    .page-title{ display:flex; align-items:baseline; gap:8px; font-size:9pt; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; margin:0; break-after:avoid; page-break-after:avoid; }
    .page-title::before{ content:""; width:16px; height:2px; background:var(--accent); flex:none; }
    .page-body{ max-width:none; }
    .view[data-view="accueil"] .grid{ grid-template-columns:minmax(0, 1fr); gap:5mm; margin-top:6mm; }
    .view[data-view="accueil"] .main{ order:-1; }
    .view[data-view="accueil"] .main > section{ margin-bottom:0; }
    .view[data-view="accueil"] .rail{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4mm 8mm; }
    .view[data-view="accueil"] .rail > div:first-child{ grid-column:1 / -1; }
    .view[data-view="accueil"] .skill-groups{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8mm; }
    .exp-dates .via{ font-size:7pt; }
    .cert-summary{ font-size:7.5pt; margin:0 0 4px; }
    .cert-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.5mm; }
    .cert{ padding:5px 8px; gap:2px; box-shadow:none; break-inside:avoid; page-break-inside:avoid; }
    .cert-domain{ font-size:6.5pt; }
    .cert-seal{ width:9pt; height:9pt; }
    .cert-title{ font-size:9pt; }
    .cert-score-label{ font-size:7.5pt; }
    .cert-score-value{ font-size:9.5pt; }
    .cert-bar, .cert-link-text, .cert-link svg, .cert-issuer{ display:none !important; }
    .cert-link{ padding:0; border:0; text-transform:none; letter-spacing:0; }
    .cert-url{ display:inline; font-size:7pt; color:var(--ink-faint); }
    a{ text-decoration:none; }
  }