/* ---------------------------
    Palette (écran)
    --------------------------- */
    :root{
        --brand-orange: #F19C57;
        --brand-blue: #00AFDB;

        /* versions pastel pour l'écran */
        --orange-soft: rgba(241,156,87,0.16);
        --blue-soft: rgba(0,175,219,0.14);

        --ink: #111;
        --muted: #666;
        --border: #111;
        --line: #1a1a1a;
    }

    /* ---------------------------
    A4 layout
    --------------------------- */
    @page { size: A4; margin: 12mm; }

    .a4-page{
        width: 210mm;
        min-height: 297mm;
        margin: 0 auto;
        /* background: #fff; */
    }

    .a4-pro{
        padding: 0;
        color: var(--ink);
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .no-print{ }
    @media print {
        .no-print { display: none !important; }
        {# header, footer, .navbar { display: none !important; } #}
        body { background: #fff !important; }
    }

    /* ---------------------------
    Header pro
    --------------------------- */
    .ex-header{
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 6mm;
        align-items: center;
        padding: 6mm 6mm 4mm 6mm;

        /* Aplats seulement à l'écran */
        background: linear-gradient(90deg, var(--orange-soft), var(--blue-soft));
        border: 2px solid var(--border);
        border-radius: 12px;
    }

    .brand{
        display: flex;
        gap: 3mm;
        align-items: center;
    }

    .brand-mark{
        width: 14mm;
        height: 14mm;
        border: 1px solid var(--border);
        border-radius: 10px;
        position: relative;
        background: #fff;
    }

    .dot{
        width: 5mm;
        height: 5mm;
        border-radius: 999px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .dot-orange{ left: 1.8mm; background: var(--brand-orange); }
    .dot-blue{ right: 1.8mm; background: var(--brand-blue); }

    .brand-name{ font-weight: 800; letter-spacing: 0.2px; }
    .brand-sub{ font-size: 10.5pt; color: var(--muted); }

    .ex-title h1{ font-weight: 900; letter-spacing: 0.2px; }
    .ex-title .meta{ margin-top: 1mm; }

    .student{
        display: flex;
        flex-direction: column;
        gap: 2.5mm;
    }

    .field{
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2mm;
        align-items: center;
    }
    .field .label{ font-size: 10.5pt; color: var(--muted); }
    .field .line{
        border-bottom: 2px solid var(--line);
        height: 0;
    }

    /* ---------------------------
    Instructions
    --------------------------- */
    .ex-instructions{
        margin: 4mm 6mm 0 6mm;
        display: grid;
        grid-template-columns: 10mm 1fr;
        gap: 3mm;
        align-items: start;
        padding: 4mm 4mm;
        border: 2px solid var(--border);
        border-radius: 12px;

        background: rgba(0,0,0,0.03); /* écran */
    }
    .ex-instructions .icn{
        width: 9mm;
        height: 9mm;
        border: 2px solid var(--border);
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-weight: 900;
    }
    .ex-instructions .title{
        font-weight: 800;
        margin-bottom: 1mm;
    }
    .ex-instructions ul{
        padding-left: 16px;
        margin: 0;
    }

    /* ---------------------------
    Body + Footer
    --------------------------- */
    .ex-body{
        padding: 6mm;
    }

    .ex-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 6mm 6mm 6mm;
        color: var(--muted);
    }

    .page-num{
        display: flex;
        align-items: center;
        gap: 2mm;
    }

    /* anti-coupure */
    .avoid-break { break-inside: avoid; page-break-inside: avoid; }

    /* ---------------------------
    IMPORTANT: impression sans aplats
    --------------------------- */
    @media print {
        .ex-header{
            background: none !important; /* supprime le gradient */
        }
        .ex-instructions{
            background: none !important; /* supprime le gris */
        }
        /* Par sécurité : éviter que l'impression applique des couleurs de fond */
        *{
            -webkit-print-color-adjust: economy;
            print-color-adjust: economy;
        }
    }