:root {
      --ink: #141A2E; --ink-soft: #262C42; --navy: #22305A; --paper: #FBF8F3; --white: #FFFFFF; --sand: #F2ECE1;
      --line: #D9CFBD; --muted: #535A70; --brick: #A93F17; --amber-hover: #FFB454;
      --on-dark: #F4F1EA; --on-dark-muted: #C5CADB; --focus: #22305A;
      --dpe-a: #3A9B4B; --dpe-b: #6DB544; --dpe-c: #B4CF4A; --dpe-d: #F2DC2E; --dpe-e: #F2B02A; --dpe-f: #E97F2D; --dpe-g: #D63A2A;
      --strip: linear-gradient(90deg,
        var(--dpe-a) 0 14.28%, var(--dpe-b) 14.28% 28.57%, var(--dpe-c) 28.57% 42.85%,
        var(--dpe-d) 42.85% 57.14%, var(--dpe-e) 57.14% 71.42%, var(--dpe-f) 71.42% 85.71%,
        var(--dpe-g) 85.71% 100%);
      --serif: "Newsreader", Georgia, "Times New Roman", serif;
      --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); background: var(--paper); overflow-wrap: break-word; }
    .enveloppe { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 18px; }
    .dpe-strip { height: 6px; background: var(--strip); }
    a { color: var(--brick); text-decoration-thickness: 1px; text-underline-offset: 3px; }
    a:hover { color: var(--ink); }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
    .portail-haut { background: var(--paper); border-bottom: 1px solid var(--ink); }
    .portail-haut .enveloppe { display: flex; align-items: center; min-height: 66px; }
    .marque { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; color: var(--ink); }
    .marque:hover { color: var(--ink); }
    .marque-marqueur { display: grid; gap: 2px; width: 22px; }
    .marque-marqueur i { display: block; height: 4px; border-radius: 1px; }
    .marque-marqueur i:nth-child(1) { width: 40%; background: var(--dpe-a); }
    .marque-marqueur i:nth-child(2) { width: 60%; background: var(--dpe-d); }
    .marque-marqueur i:nth-child(3) { width: 80%; background: var(--dpe-f); }
    .marque-marqueur i:nth-child(4) { width: 100%; background: var(--dpe-g); }
    .marque-titre { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; letter-spacing: -.01em; line-height: 1; }
    .marque-tld { font-family: var(--sans); font-weight: 500; font-size: .8em; color: var(--muted); letter-spacing: 0; }
    main.enveloppe { padding-top: 44px; padding-bottom: 72px; }
    h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--ink); letter-spacing: -.012em; }
    h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); line-height: 1.1; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 3px solid var(--ink); }
    h2 { font-size: clamp(1.3rem, 1.2rem + .5vw, 1.5rem); line-height: 1.25; margin: 2.2em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--line); }
    h1 + h2, h1 + p + h2 { border-top: 0; padding-top: 0; margin-top: 1.4em; }
    p { margin: 0 0 1em; }
    .portail-socle { --focus: #FFB454; background: var(--ink); color: var(--on-dark-muted); font-size: .95rem; }
    .portail-socle .enveloppe { padding-top: 28px; padding-bottom: 28px; }
    .portail-socle p { margin: 0; }
    .portail-socle a { color: var(--on-dark); }
    .portail-socle a:hover { color: var(--amber-hover); }
    @media (min-width: 640px) { .enveloppe { padding: 0 28px; } main.enveloppe { padding-top: 64px; padding-bottom: 96px; } }
    @media (max-width: 400px) { .marque-marqueur { display: none; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }