/* ─── Fonts (mêmes assets que hoogin.io) ─────────────────────────── */
    @font-face { font-family: "Octosquares"; src: url("fonts/tt-octosquares-bold.woff2") format("woff2"); font-weight: 700; font-display: optional; }
    @font-face { font-family: "Octosquares Condensed"; src: url("fonts/tt-octosquares-condensed-bold.woff2") format("woff2"); font-weight: 700; font-display: optional; }
    @font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: optional; }
    @font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: optional; }
    @font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: optional; }
    @font-face { font-family: "Inter"; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: optional; }
    @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: optional; }

    /* ─── Tokens (alignés vitrine) ───────────────────────────────────── */
    :root {
      --bg: #0a0e1a;
      --card: rgba(15, 23, 42, 0.65);
      --border: rgba(51, 65, 85, 0.55);
      --text: #f8fafc;
      --muted: #94a3b8;
      --dim: #7c8ba1;
      --emerald: #34d399;
      --emerald-soft: #6ee7b7;
      --cyan: #22d3ee;
      --violet: #a78bfa;
      --font-sans: "Inter", system-ui, -apple-system, sans-serif;
      --font-display: "Octosquares", "Inter", sans-serif;
      --font-display-cond: "Octosquares Condensed", "Inter", sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { background: var(--bg); }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-feature-settings: "ss01", "cv11";
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
      overflow-x: hidden;
      /* Contexte d'empilement : sans lui, les couches z-index négatif
         (aurora, grille, halo) peignent SOUS le fond opaque du body. */
      isolation: isolate;
    }
    ::selection { background: rgba(52, 211, 153, 0.35); color: #ecfdf5; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgb(51 65 85); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgb(100 116 139); }
    html { scrollbar-width: thin; scrollbar-color: rgb(51 65 85) transparent; }

    /* ─── Fond : aurora + grille technique ───────────────────────────── */
    body::before {
      content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
      background:
        radial-gradient(60rem 40rem at 85% -10%, rgba(52, 211, 153, 0.08), transparent 60%),
        radial-gradient(50rem 36rem at -10% 30%, rgba(6, 182, 212, 0.07), transparent 60%),
        radial-gradient(46rem 40rem at 70% 110%, rgba(167, 139, 250, 0.06), transparent 60%);
      transform: translateY(calc(var(--sy, 0) * -0.03px));
    }
    body::after {
      content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background-image:
        linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(70rem 50rem at 50% 0%, black, transparent 75%);
              mask-image: radial-gradient(70rem 50rem at 50% 0%, black, transparent 75%);
    }

    #scroll-progress {
      position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 50;
      background: linear-gradient(90deg, #34d399, #22d3ee, #a78bfa);
    }

    /* ─── Mini-nav sticky (apparaît après le hero) ────────────────────── */
    #mini-nav {
      position: fixed; top: 0; left: 50%; z-index: 40;
      transform: translate(-50%, -120%);
      display: flex; gap: 1.4rem; align-items: center;
      padding: 0.55rem 1.25rem;
      border: 1px solid var(--border); border-top: none;
      border-radius: 0 0 0.8rem 0.8rem;
      background: rgba(10, 14, 26, 0.95);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
      transition: transform 0.35s ease, visibility 0.35s;
      max-width: calc(100vw - 1rem);
      visibility: hidden;
    }
    #mini-nav.on { transform: translate(-50%, 0); visibility: visible; }
    #mini-nav a { color: var(--dim); white-space: nowrap; }
    #mini-nav a:hover { color: var(--text); }
    #mini-nav a.active { color: var(--emerald); }
    @media (max-width: 520px) { #mini-nav { gap: 0.8rem; font-size: 0.68rem; } }
    @media (max-width: 390px) { #mini-nav { gap: 0.55rem; font-size: 0.72rem; padding: 0.5rem 0.7rem; letter-spacing: 0.01em; } }
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
    [id] { scroll-margin-top: 3.5rem; }

    /* ─── Reveal on scroll (cv.js pose .revealed ; no-JS via noscript).
       Filet CSS pur : si le script ne tourne pas (cache périmé, extension,
       échec réseau), l'animation force l'apparition à 2,5 s — le contenu
       ne doit JAMAIS dépendre du JS pour être lisible. ─────────────────── */
    .reveal {
      opacity: 0; transform: translateY(22px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      animation: reveal-fallback 0.6s ease 2.5s forwards;
    }
    .reveal.revealed { opacity: 1; transform: none; animation: none; }
    @keyframes reveal-fallback { to { opacity: 1; transform: none; } }
    .timeline::before { animation: tl-fallback 0.6s ease 2.5s forwards; }
    .job::before { animation: dot-fallback 0.4s ease 2.5s forwards; }
    .timeline.tl-on::before, .job.revealed::before { animation: none; }
    @keyframes tl-fallback { to { transform: scaleY(1); } }
    @keyframes dot-fallback { to { transform: scale(1); } }
    /* Script présent : les filets s'effacent, l'IntersectionObserver reprend. */
    html.cv-js .reveal,
    html.cv-js .timeline::before,
    html.cv-js .job::before { animation: none; }
    html.cv-js .job:first-child::before { animation: pulse-dot 2.4s ease-in-out infinite; }

    @keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    @keyframes float-soft { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
    @keyframes blink { 50% { opacity: 0; } }
    @keyframes pulse-dot {
      0%, 100% { box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
      50%      { box-shadow: 0 0 16px rgba(52, 211, 153, 0.85); }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .scroll-cue::before { animation: none; }
      .hero-raven, .eyebrow .caret, .job:first-child::before { animation: none !important; }
      header.hero .wrap > * { animation: none !important; }
      .timeline::before, .job::before { transform: none !important; transition: none !important; }
      .card, .btn, .job .when, .skill li, #mini-nav { transition: none !important; }
      .card:hover, .btn:hover { transform: none; box-shadow: none; }
      .card::after { display: none; }
    }

    .wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; }

    a { color: var(--emerald-soft); text-decoration: none; transition: color .15s; }
    a:hover { color: #a7f3d0; }

    /* ─── Hero ───────────────────────────────────────────────────────── */
    header.hero { position: relative; padding: 5rem 0 3.5rem; overflow: hidden; }
    /* Parallax : cv.js pose --sy (scrollY) ; sans JS, tout reste statique. */
    .raven-wrap {
      position: absolute; top: 1.5rem; right: -2rem; width: 340px;
      pointer-events: none; will-change: transform;
      transform: translateY(calc(var(--sy, 0) * -0.12px));
    }
    .hero-raven {
      display: block; width: 100%; opacity: 0.1;
      mix-blend-mode: screen;
      animation: float-soft 9s ease-in-out infinite;
      -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
              mask-image: linear-gradient(to bottom, black 55%, transparent);
    }
    header.hero .wrap > * { animation: reveal-up 0.65s ease both; }
    header.hero .wrap > *:nth-child(2) { animation-delay: 0.08s; }
    header.hero .wrap > *:nth-child(3) { animation-delay: 0.16s; }
    header.hero .wrap > *:nth-child(4) { animation-delay: 0.24s; }
    header.hero .wrap > *:nth-child(5) { animation-delay: 0.34s; }
    header.hero .wrap > *:nth-child(6) { animation-delay: 0.44s; }
    .eyebrow {
      font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
      color: var(--emerald); margin-bottom: 1.1rem;
    }
    .eyebrow .caret { display: inline-block; margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
    h1 {
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.05;
      letter-spacing: 0.01em;
      text-shadow: 0 0 44px rgba(52, 211, 153, 0.16);
    }
    .role {
      margin-top: 0.9rem; font-size: clamp(1.05rem, 2.5vw, 1.3rem);
      color: var(--muted); font-weight: 500; max-width: 34em;
    }
    .role strong {
      font-weight: 600;
      background: linear-gradient(90deg, #6ee7b7, #22d3ee);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    .hero-meta {
      margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
      font-size: 0.9rem; color: var(--dim);
    }
    .hero-meta span::before { content: "▸ " / ""; color: var(--emerald); }

    .stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.6rem; }
    .stat { position: relative; padding-left: 0.9rem; }
    .stat::before {
      content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem;
      width: 2px; border-radius: 2px;
      background: linear-gradient(180deg, #34d399, rgba(52, 211, 153, 0));
    }
    .stat .v {
      font-family: var(--font-display-cond); font-size: 2.6rem; line-height: 1;
      color: var(--text); font-variant-numeric: tabular-nums;
    }
    .stat .l { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; max-width: 15em; }

    .hero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

    .btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.65rem 1.25rem; border-radius: 0.6rem;
      font-size: 0.9rem; font-weight: 600; cursor: pointer;
      border: 1px solid var(--border); background: transparent; color: var(--text);
      font-family: var(--font-sans);
      transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
    }
    .btn:hover { border-color: var(--emerald); transform: translateY(-1px); box-shadow: 0 0 22px rgba(52, 211, 153, 0.18); }
    .btn:focus-visible, a:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
    .btn-primary {
      background: linear-gradient(120deg, rgba(52,211,153,.18), rgba(6,182,212,.14));
      border-color: rgba(52, 211, 153, 0.45);
    }

    /* ─── Sections ───────────────────────────────────────────────────── */
    main { counter-reset: sec; }
    main section { counter-increment: sec; }
    section { padding: 2.6rem 0; border-top: 1px solid rgba(51, 65, 85, 0.35); }
    h2::before {
      content: counter(sec, decimal-leading-zero);
      font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400;
      color: var(--emerald); letter-spacing: 0.08em; opacity: 0.75;
      margin-right: 0.55rem; vertical-align: 0.35em;
    }
    h2 {
      font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
      margin-bottom: 1.5rem; letter-spacing: 0.015em;
      position: relative; padding-bottom: 0.55rem;
    }
    h2::after {
      content: ""; position: absolute; left: 0; bottom: 0;
      width: 56px; height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, var(--emerald), var(--cyan));
    }
    h2 .tick { color: var(--emerald); }

    .lede { color: #cbd5e1; max-width: 46em; }
    .lede + .lede { margin-top: 0.9rem; }

    /* Réalisations */
    .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }
    .card {
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.45));
      border: 1px solid var(--border);
      border-radius: 0.8rem; padding: 1.25rem 1.35rem;
      position: relative; overflow: hidden;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .card::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--violet));
      opacity: 0.55;
    }
    .card:hover {
      transform: translateY(-3px);
      border-color: rgba(34, 211, 238, 0.45);
      box-shadow: 0 12px 32px rgba(2, 6, 23, 0.5), 0 0 24px rgba(34, 211, 238, 0.07);
    }
    /* Spotlight : lueur qui suit le curseur dans la carte (cv.js pose --mx/--my) */
    .card::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), rgba(34, 211, 238, 0.1), transparent 70%);
      opacity: 0; transition: opacity 0.3s; pointer-events: none;
    }
    .card:hover::after { opacity: 1; }
    .card h3 { font-size: 0.98rem; font-weight: 600; margin-bottom: 0.5rem; }
    .card .big {
      float: right; margin: 0 0 0.35rem 0.9rem;
      font-family: var(--font-display-cond); font-size: 2rem; line-height: 1;
      background: linear-gradient(135deg, #6ee7b7, #22d3ee);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    /* Dimensionnement optique : un glyphe seul pèse 5× moins qu'un « 20 500 ». */
    .card .big.solo { font-size: 2.6rem; }
    .card h3 .k { font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan); display: block; margin-bottom: 0.4rem; letter-spacing: 0.06em; }
    .card p { font-size: 0.875rem; color: var(--muted); }
    .card p strong { color: #e2e8f0; font-weight: 600; }

    /* Compétences */
    .skills-scope {
      font-size: 0.9rem; color: var(--muted); max-width: 46em;
      margin-bottom: 1.4rem; line-height: 1.65;
    }
    .skills-scope strong { color: #e2e8f0; font-weight: 600; }
    /* La ligne de preuve ferme la colonne : la pastille annonce, elle atteste. */
    .skill .proof {
      font-size: 0.8rem; color: var(--muted); line-height: 1.6;
      margin-top: 0.8rem; padding-top: 0.7rem;
      border-top: 1px solid var(--border);
    }
    /* Bande transverse : pleine largeur sous la grille, pas une 4e colonne. */
    .skill-band { margin-top: 1rem; }
    .skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
    .skill h3 {
      font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400;
      color: var(--violet); letter-spacing: 0.08em; margin-bottom: 0.55rem;
    }
    /* Colonne en flex : les pastilles poussent, la preuve se cale en bas — sans quoi
       les trois blocs de preuve flottent à des hauteurs différentes selon le nombre
       de rangées de pastilles, et ça se lit comme un défaut de rendu. */
    .skill { display: flex; flex-direction: column; }
    .skill ul { list-style: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.45rem; flex: 1; }
    .skill li {
      font-size: 0.8rem; color: #cbd5e1; line-height: 1.4;
      border: 1px solid var(--border); border-radius: 999px;
      padding: 0.28rem 0.7rem; background: rgba(15, 23, 42, 0.5);
      transition: border-color 0.2s, color 0.2s;
    }
    .skill li:hover { border-color: var(--emerald); color: #e2e8f0; }

    /* Parcours — timeline verticale, la ligne se dessine à l'entrée en vue */
    .timeline { display: grid; gap: 1.4rem; position: relative; --tl-x: 10.05rem; }
    .timeline::before {
      content: ""; position: absolute; top: 0.45rem; bottom: 0.45rem; left: var(--tl-x);
      width: 1px;
      background: linear-gradient(180deg, #34d399, rgba(52, 211, 153, 0.25) 35%, rgba(148, 163, 184, 0.15));
      transform: scaleY(0); transform-origin: top;
      transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .timeline.tl-on::before { transform: scaleY(1); }
    .job { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.2rem; position: relative; }
    .job::before {
      content: ""; position: absolute; left: calc(var(--tl-x) - 4px); top: 0.42rem;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--bg); border: 2px solid var(--emerald);
      box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
      transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
    }
    .job.revealed::before { transform: scale(1); }
    .job:first-child::before {
      /* le filet 2,5 s doit survivre à cette règle plus spécifique : on cumule */
      animation: dot-fallback 0.4s ease 2.5s forwards, pulse-dot 2.4s ease-in-out infinite;
    }
    .job.revealed:first-child::before { animation: pulse-dot 2.4s ease-in-out infinite; }
    .job > div:last-child { padding-left: 0.5rem; }
    .job .when { font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); padding-top: 0.2rem; text-align: right; padding-right: 0.9rem; transition: color 0.2s; }
    .job:hover .when { color: var(--emerald-soft); }
    .job:hover::before { box-shadow: 0 0 16px rgba(52, 211, 153, 0.8); }
    /* Indice de défilement permanent. Le bandeau a atteint trois fois aujourd'hui
       la hauteur exacte du viewport mobile : l'écran d'accueil paraissait complet et
       rien ne disait qu'il y avait cinq fois plus dessous. Un chevron découple l'indice
       de la hauteur du hero — le problème ne peut plus revenir. Chevron en bordures,
       pas en image : la CSP interdit les data: URI. */
    .scroll-cue { display: none; }
    @media (max-width: 640px) {
      .scroll-cue { display: block; margin-top: 1.4rem; }
      .scroll-cue::before {
        content: ""; display: block; width: 0.55rem; height: 0.55rem; margin: 0 auto;
        border-right: 2px solid var(--emerald); border-bottom: 2px solid var(--emerald);
        transform: rotate(45deg); opacity: 0.5;
        animation: scroll-cue 2.4s ease-in-out infinite;
      }
    }
    @keyframes scroll-cue {
      0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
      50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 0.9; }
    }

    @media (max-width: 640px) {
      /* Le hero mesurait 837 px dans un viewport de 844 : il se terminait pile à la
         ligne de flottaison, donc l'écran d'accueil paraissait complet et rien ne
         disait qu'il y avait cinq fois plus dessous. On resserre le haut et le bas
         pour laisser dépasser le titre de la section suivante. */
      header.hero { padding: 1.5rem 0 0.75rem; }
      .timeline { --tl-x: 0.3rem; }
      .job { grid-template-columns: 1fr; gap: 0.2rem; padding-left: 1.4rem; }
      .job::before { top: 0.34rem; }
      .job > div:last-child { padding-left: 0; }
      .job .when { text-align: left; padding-right: 0; }
      .stats { gap: 1.2rem 2rem; margin-top: 1.8rem; }
      .stat .v { font-size: 1.7rem; }
      .raven-wrap { width: 180px; right: -1rem; }
      .skill li { font-size: 0.72rem; padding: 0.22rem 0.55rem; }
    }
    .job h3 { font-size: 1rem; font-weight: 600; }
    .job .org { color: var(--emerald-soft); font-weight: 500; }
    .job p { font-size: 0.875rem; color: var(--muted); margin-top: 0.3rem; max-width: 42em; }

    footer { padding: 2.5rem 0 3.5rem; border-top: 1px solid rgba(51, 65, 85, 0.35); font-size: 0.82rem; color: var(--dim); }
    footer .row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

    /* Preuve par l'artefact */
    .proof {
      border: 1px solid rgba(52, 211, 153, 0.25); border-radius: 0.8rem;
      padding: 1.15rem 1.3rem; max-width: 46em;
      background: linear-gradient(180deg, rgba(6, 78, 59, 0.12), rgba(15, 23, 42, 0.4));
    }
    .proof-cmd { font-family: var(--font-mono); font-size: 0.78rem; color: var(--emerald); margin-bottom: 0.6rem; }
    .proof p:not(.proof-cmd) { font-size: 0.9rem; color: #cbd5e1; }
    .proof code { font-family: var(--font-mono); font-size: 0.82em; color: var(--cyan); }

    /* QR — impression uniquement */
    .print-qr, .qr-note { display: none; }

    /* Signature de clôture */
    .sig {
      text-align: center; padding: 2.8rem 0 0.5rem;
      font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim);
      letter-spacing: 0.08em;
    }
    .sig .rune { color: var(--emerald); margin-right: 0.4rem; }

    /* ─── Print : version sobre (export PDF via Ctrl+P) ─────────────── */
    @media print {
      :root { --emerald: #047857; --emerald-soft: #047857; --cyan: #0e7490; --violet: #6d28d9; }
      html, body { background: #fff; color: #111827; }
      .wrap { max-width: 100%; padding: 0; }
      header.hero { padding: 0 0 1.2rem; }
      .hero-raven, .hero-actions { display: none; }
      h1 { color: #111827; font-size: 1.9rem; }
      .role, .lede { color: #374151; }
      .hero-meta, .stat .l, .card p, .skill li, .job p { color: #4b5563; }
      .stat .v, .card h3, .job h3, h2 { color: #111827; }
      .stats { gap: 1.6rem; margin-top: 1.4rem; }
      .stat .l { max-width: 13em; }
      .card { padding: 1rem 1.15rem; }

      .stat .v { font-size: 1.6rem; }
      body::before, body::after, #scroll-progress, #echantillon, .sig, #mini-nav { display: none; }
      h2::before { color: #6b7280; }
      .card .big, .card .big.solo { background: none; -webkit-text-fill-color: #111827; color: #111827; font-size: 1.25rem; }
      .qr-block { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 0.9rem; }
      .print-qr { display: block; width: 84px; height: 84px; }
      .qr-note { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: #6b7280; margin-top: 0.35rem; }
      .reveal { opacity: 1 !important; transform: none !important; transition: none; }
      header.hero .wrap > * { animation: none; }
      .role strong { background: none; -webkit-text-fill-color: #111827; color: #111827; }
      .card p strong, .job p strong, .lede strong { color: #111827; }
      .eyebrow .caret { display: none; }
      .stat::before { background: #d1d5db; }
      .timeline::before, .job::before { display: none; }
      .job { padding-left: 0; }
      .job > div:last-child { padding-left: 0; }
      .card::before { display: none; }
      .skill li { border-color: #e5e7eb; background: none; color: #4b5563; }
      h2::after { background: #111827; }
      section { padding: 0.7rem 0; border-top: 1px solid #e5e7eb; }
      /* Le chevron de défilement n'a aucun sens sur papier. */
      .scroll-cue { display: none; }
      /* Le profil est passé à quatre paragraphes : on resserre leur interligne
         plutôt que de retirer du contenu, pour rester sur cinq pages. */
      .lede { margin-bottom: 0.5rem; line-height: 1.5; }
      h2 { break-after: avoid; }
      .card, .job, .skill { break-inside: avoid; }
      .skills-scope, .skill .proof { color: #4b5563; }
      .skill .proof { border-top-color: #e5e7eb; }
      /* Chromium ne fragmente pas un conteneur grid : la grille entière basculait
         en page suivante, laissant un titre orphelin et 60 % de blanc. */
      .skills { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; }
      .skill { flex: 1 1 14rem; }
      /* Même défaut, jamais corrigé sur l'autre grille : les six cartes formaient
         un bloc insécable qui basculait entier en page suivante. Contenu réel
         mesuré à 3,5 pages A4, sortie à 6 — l'écart était de la fragmentation. */
      .cards { display: flex; flex-wrap: wrap; gap: 0.7rem; }
      .cards .card { flex: 1 1 21rem; }
      .card { background: none; border: 1px solid #e5e7eb; }
      a { color: #047857; }
      a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #6b7280; }
      a[href^="http"][href="https://hoogin.io"]::after { content: ""; }
      a[href^="mailto"]::after { content: ""; }
      footer { border-top: 1px solid #e5e7eb; }
    }
    @page { margin: 11mm 13mm; }