/* Globalpaie — Socle : remise à zéro, typographie, liens, focus, impression.
   PLAN_BUILD_UI_V1 §4.1. Aucun hex : tokens.css uniquement. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--encre);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Titres ---- */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    color: var(--encre);
}

h1 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 26px);
    letter-spacing: -.01em;
}

h2 {
    font-family: var(--font-display);
    font-size: 19px;
}

h3 { font-size: 16px; }
h4 { font-size: 15px; }

p {
    margin: 0 0 12px;
}

p:last-child {
    margin-bottom: 0;
}

/* ---- Liens ---- */
a {
    color: var(--lien);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--lien-hover);
    text-decoration: underline;
}

/* ---- Listes ---- */
ul, ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

/* ---- Média ---- */
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

svg {
    flex: none;
}

/* ---- Formulaires : hérite de la typo ---- */
button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

button {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

/* ---- Tables ---- */
table {
    border-collapse: collapse;
    width: 100%;
}

/* ---- Code ---- */
code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: .92em;
}

hr {
    border: 0;
    border-top: 1px solid var(--ligne);
    margin: 20px 0;
}

/* ---- Focus visible sur TOUT élément interactif (§10.4) ---- */
:focus-visible {
    outline: 2px solid var(--primaire);
    outline-offset: 2px;
    border-radius: 4px;
}

/* On ne retire jamais le focus sans le remplacer. */
:focus:not(:focus-visible) {
    outline: none;
}

/* ---- Lien d'évitement (§10) — remplace les <style> inline ---- */
.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--primaire);
    color: var(--carte);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--ombre-2);
    transition: top var(--transition);
}

.skip-link:focus {
    top: 8px;
    color: var(--carte);
    text-decoration: none;
}

/* ---- Sélection ---- */
::selection {
    background: var(--primaire-doux);
    color: var(--encre);
}

/* ---- Barres de défilement discrètes (progressive enhancement) ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--muet-2) transparent;
}

/* ---- Verrou de défilement quand un panneau modal/drawer est ouvert ---- */
body.nav-verrou {
    overflow: hidden;
}

/* ---- Impression ---- */
@media print {
    body {
        background: none;
        color: var(--encre);
        font-size: 12px;
    }

    .sidebar,
    .topbar,
    .drawer-voile,
    .toast-zone,
    .skip-link,
    .page-actions,
    .bottom-nav,
    .no-print,
    [data-no-print] {
        display: none !important;
    }

    .app,
    .main,
    .page {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .card,
    .table-wrap {
        border: 1px solid var(--ligne);
        box-shadow: none !important;
        break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }
}