:root { --acier: #1B4E71; --acier-fonce: #123754; --signal: #F5D01C; --signal-hover: #FFE04D; --signal-pale: #FFF6C7; --atelier: #ECEEEE; --blanc: #FFFFFF; --fonte: #090A0B; --ink: #111518; --ink-soft: #2F363C; --muted: #535B62; --line: #C5CBCF; --on-fonte: #ECEEEE; --on-fonte-soft: #A7AEB4;
      --f-titre: "Hubot Sans", "Arial Narrow", system-ui, sans-serif; --f-texte: "Andada Pro", Georgia, serif;
      --chantier: repeating-linear-gradient(-45deg, var(--signal) 0 9px, var(--fonte) 9px 18px);
      --papier: linear-gradient(rgba(27,78,113,.14) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(27,78,113,.14) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(rgba(27,78,113,.07) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(27,78,113,.07) 1px, transparent 1px) 0 0 / 8px 8px; }
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--papier), var(--atelier); color: var(--ink-soft); font-family: var(--f-texte); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; }
    a { color: var(--acier); text-underline-offset: 3px; overflow-wrap: anywhere; }
    a:hover { color: var(--acier-fonce); background: var(--signal-pale); }
    :focus-visible { outline: 3px solid var(--acier); outline-offset: 2px; }
    .contenant { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
    @media (min-width: 640px) { .contenant { padding: 0 28px; } }
    .domaine-tete { background: var(--blanc); border-bottom: 2px solid var(--fonte); }
    .domaine-tete .contenant { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
    .embleme { display: inline-flex; align-items: stretch; border: 2px solid var(--fonte); color: var(--fonte); text-decoration: none; min-width: 0; }
    .embleme:hover { background: none; }
    .embleme svg { width: 42px; height: 42px; display: block; flex: none; }
    .embleme-mots { display: flex; flex-direction: column; justify-content: center; padding: 2px 10px; border-left: 2px solid var(--fonte); font-family: var(--f-titre); text-transform: uppercase; line-height: 1.08; }
    .embleme-mots span:first-child { font-stretch: 80%; font-weight: 600; font-size: .75rem; letter-spacing: .14em; color: var(--muted); }
    .embleme-bourg { font-stretch: 90%; font-weight: 800; font-size: 1rem; letter-spacing: .03em; color: var(--acier); white-space: nowrap; }
    .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px; background: var(--signal); color: var(--fonte); border: 2px solid var(--signal); font-family: var(--f-titre); font-stretch: 86%; font-weight: 700; font-size: .9rem; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
    .bouton::before { content: ""; width: 8px; height: 8px; background: var(--fonte); }
    .bouton:hover { background: var(--signal-hover); border-color: var(--signal-hover); color: var(--fonte); }
    main.ecran { flex: 1; max-width: 840px; padding-top: 40px; padding-bottom: 64px; }
    .feuille { position: relative; background: var(--blanc); border: 1px solid var(--fonte); padding: 34px 20px 20px; }
    .feuille::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; background: var(--chantier); }
    @media (min-width: 640px) { .feuille { padding: 40px 40px 28px; } }
    h1, h2 { font-family: var(--f-titre); color: var(--ink); word-spacing: .06em; }
    h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 800; font-stretch: 95%; line-height: 1.08; margin: 0 0 24px; }
    h1::after { content: ""; display: block; height: 9px; margin-top: 14px; max-width: 260px; background: linear-gradient(var(--acier), var(--acier)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--acier), var(--acier)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--acier), var(--acier)) 100% 0 / 1px 100% no-repeat, linear-gradient(var(--signal), var(--signal)) 0 50% / 56px 5px no-repeat; }
    h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; margin: 2em 0 .5em; padding-top: 14px; border-top: 1px solid var(--line); color: var(--acier-fonce); }
    h1 + h2 { border-top: 0; padding-top: 0; }
    p, li { margin: 0 0 1em; }
    ul { padding-left: 1.2em; }
    .reconnaissance-carte { text-align: center; }
    .reconnaissance-carte h1::after { margin-left: auto; margin-right: auto; }
    .domaine-embase { background: var(--fonte); color: var(--on-fonte-soft); font-size: .95rem; }
    .domaine-embase::before { content: ""; display: block; height: 8px; background: var(--chantier); }
    .domaine-embase .contenant { padding-top: 18px; padding-bottom: 18px; }
    .domaine-embase p { margin: 0; }
    .domaine-embase a { display: inline-flex; align-items: center; min-height: 42px; color: var(--on-fonte); text-decoration: none; }
    .domaine-embase a:hover { background: none; color: var(--blanc); text-decoration: underline; text-decoration-color: var(--signal); }
    .domaine-embase a:focus-visible { outline-color: var(--signal); }
    @media (max-width: 380px) { .embleme svg { width: 36px; height: 36px; } .embleme-bourg { font-size: .9rem; } .embleme-mots { padding: 2px 7px; } }