/* Source unique des couleurs — référencée ici et par assets/tailwind-config.js
   (via var(--nom)) pour éviter toute valeur dupliquée entre les deux fichiers. */
:root {
    color-scheme: dark;
    --ink-950: #071b2e;
    --ink-900: #0b2540;
    --ink-800: #11304f;
    --line: #33587e;
    --line-soft: #1c3a5c;
    --paper: #eef3f8;
    --paper-muted: #93a9c2;
    --signal: #ff6a1a;
    --signal-dim: #c94f10;
}

body { background: var(--ink-900); }

/* Grille de fond façon papier millimétré — vocabulaire du dessin technique */
.grid-sheet {
    background-image:
        linear-gradient(rgba(238,243,248,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(238,243,248,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Panneau "document" : coins en repères de calage, empruntés à la sérigraphie
   (les repères de calage alignent les couches d'encre — clin d'œil direct au métier) */
.doc-panel {
    position: relative;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: 2px;
}
.doc-panel::before,
.doc-panel::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    transition: border-color 300ms ease;
    pointer-events: none;
}
.doc-panel::before { top: -1px; left: -1px; border-top: 2px solid var(--line); border-left: 2px solid var(--line); }
.doc-panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--line); border-right: 2px solid var(--line); }
.doc-panel:hover::before, .doc-panel:hover::after,
.doc-panel:focus-within::before, .doc-panel:focus-within::after {
    border-color: var(--signal);
}

/* Registre chronologique : lignes de ledger plutôt que timeline à bulles */
.ledger-row { border-top: 1px solid var(--line-soft); }
.ledger-row:first-child { border-top: 1px solid var(--line); }

/* Puces "document" : remplace les listes séparées par point médian
   (A · B · C), pattern trop générique, par des repères bordés comme
   des références de pièce sur une fiche technique */
.tag-chip {
    display: inline-block;
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--paper-muted);
    border: 1px solid var(--line-soft);
    padding: 0.15rem 0.5rem;
}

/* Bouton "copier" discret, même registre que les autres actions bordées */
.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    color: var(--line);
    border: 1px solid transparent;
    transition: color 200ms ease, border-color 200ms ease;
}
.copy-btn:hover, .copy-btn:focus-visible {
    color: var(--signal);
    border-color: var(--line);
}

/* Une seule séquence d'entrée orchestrée, au chargement du hero uniquement */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-enter { animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-enter-delay-1 { animation-delay: 90ms; }
.hero-enter-delay-2 { animation-delay: 180ms; }
.hero-enter-delay-3 { animation-delay: 270ms; }

/* Révélation au scroll : un seul système, réutilisé partout, façon
   tracé qui apparaît sur un document plutôt qu'un effet décoratif par section */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-enter { animation: none; opacity: 1; transform: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* Focus clavier visible et cohérent avec l'accent signal */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--signal);
    color: var(--ink-900);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* Lien de nav actif (scroll-spy) */
.nav-link[aria-current="location"] {
    color: var(--paper);
}
.nav-link[aria-current="location"]::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--signal);
    margin-top: 4px;
}

/* Impression : un recruteur qui imprime la page ne doit pas gaspiller
   une cartouche d'encre sur du fond navy plein écran */
@media print {
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        animation: none !important;
        transition: none !important;
    }
    body { background: #ffffff !important; }
    body, p, span, div, li, h1, h2, h3 { color: #111111 !important; }
    a { color: #111111 !important; text-decoration: underline; }
    nav, footer, .skip-link { display: none !important; }
    .grid-sheet { background-image: none !important; }
    main { padding-top: 0 !important; }
    .doc-panel, .ledger-row, .tag-chip, [class*="border-"] {
        border-color: #cccccc !important;
        background: transparent !important;
    }
    .doc-panel::before, .doc-panel::after { display: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .copy-btn { display: none !important; }
}