/* security.css — styles propres à security.wng.ch.
   Uniquement ce que wng-style.css (kit satellite WNG, non modifié) ne couvre pas.
   Couleurs : tokens du kit uniquement. */

/* ---------- Polices auto-hébergées (aucun appel à un tiers) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

/* ---------- Sans JavaScript : la page reste complète ---------- */
html:not(.js) .site-header{background:var(--paper)}
html:not(.js) .u path{stroke-dashoffset:0}
html:not(.js) .menu-btn{display:none}

/* ---------- Utilitaires (la CSP interdit les styles en ligne) ---------- */
.defs{position:absolute;width:0;height:0}
.d1{--d:80ms}.d2{--d:160ms}.d3{--d:220ms}
.mt-grid{margin-top:clamp(40px,6vh,64px)}
.mt-link{margin-top:clamp(28px,4vh,44px)}

/* ---------- En-tête : langues ---------- */
.lang a{transition:color .3s}
.lang a:hover{color:var(--ink)}
.mm-lang{display:flex;gap:22px;font-weight:700;font-size:22px}
.mm-lang b{color:var(--accent-light)}

/* ---------- Hero compact : le formulaire reste proche ---------- */
.hero.hero-sm{min-height:78vh;min-height:78svh}
.hero.hero-sm .wrap{padding-block:clamp(40px,8vh,96px)}

/* ---------- Haut de page sans hero (politique) ---------- */
.page-top{padding-top:calc(var(--nav-h) + clamp(48px,9vh,110px))}

/* ---------- Cartes sur fond blanc ---------- */
.sec-white .card{background:var(--paper)}

/* ---------- Formulaire ---------- */
.form{display:grid;gap:24px;width:100%;max-width:760px;margin-top:clamp(8px,2vh,20px)}
.form .row{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:768px){.form .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field input,.field textarea{width:100%;border-color:var(--line-2)}
.field textarea{min-height:240px;line-height:1.5;resize:vertical}
.field .opt{font-weight:400;color:var(--muted)}
.req{color:var(--accent)}
.hint{font-size:var(--t-sm);line-height:1.4;color:var(--muted)}
.form .btn{justify-self:start;margin-top:8px}
/* Champ piège : hors écran plutôt que display:none */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Messages ---------- */
.notice{width:100%;max-width:760px;padding:20px 24px;border-radius:var(--r-card);background:var(--card);display:grid;gap:10px}
.notice.err{box-shadow:inset 0 0 0 1.5px var(--ink)}
.notice.err strong{font-weight:600}
.notice ul{display:grid;gap:6px}
.notice li{position:relative;padding-left:18px;font-size:var(--t-sm);line-height:1.45}
.notice li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.done{display:grid;gap:18px;justify-items:start;width:100%;max-width:760px}
.ref{display:inline-block;padding:14px 20px;border-radius:12px;background:var(--card);font-family:var(--mono);font-weight:500;font-size:clamp(20px,1vw + 16px,32px);letter-spacing:0;-webkit-user-select:all;user-select:all}

/* ---------- Texte courant (politique) ---------- */
.prose{display:grid;gap:14px;width:100%;max-width:70ch;margin-top:clamp(20px,4vh,40px)}
.prose h2{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.03em;font-weight:500;margin-top:clamp(26px,4vh,44px)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2);line-height:1.55}
.prose ul{display:grid;gap:8px}
.prose li{position:relative;padding-left:20px}
.prose li::before{content:"";position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.prose code{font-family:var(--mono);font-size:.88em;letter-spacing:0;padding:2px 7px;border-radius:7px;background:var(--paper);overflow-wrap:anywhere}

/* ---------- Pied de page ---------- */
.ft-note{max-width:34ch;color:rgba(255,255,255,.75);font-size:var(--t-sm);line-height:1.5}
.ft-langs{display:flex;gap:18px}