/* =========================================================
   CHARTE MICROPEDIA — « le surligneur »
   Papier chaud · Encre · Citron (accent unique)
   Polices, couleurs, en-tête et pied de page communs à toutes les pages.
   ========================================================= */
@font-face{font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap; src:url('/fonts/bricolage-grotesque-latin.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:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/instrument-serif-italic-latin.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.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.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;}

:root{
  --paper:#F6F3EC;
  --paper-deep:#ECE7DA;
  --card:#FFFDF8;
  --ink:#0E1B2C;
  --ink-2:#1B2A3E;
  --ink-soft:#4A5566;
  --ink-faint:#7D8593;
  --lime:#E4F35A;
  --lime-deep:#C9DB2E;
  --line:rgba(14,27,44,.12);
  --line-light:rgba(255,255,255,.12);
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --body:'Inter', system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --r-lg:32px; --r-md:22px; --r-sm:14px;
  --gutter:40px;
}

/* ---------- Lien d'évitement ---------- */
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; font-weight:600; font-size:14px; padding:12px 18px; border-radius:0 0 12px 12px; transition:top .2s;}
.skip:focus{top:0;}

/* ---------- En-tête ---------- */
.hdr{position:sticky; top:0; z-index:50; transition:background .3s, box-shadow .3s;}
.hdr.scrolled{background:rgba(246,243,236,.97); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line);}
.hdr-in{max-width:1360px; margin:0 auto; padding:18px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.045em; display:flex; align-items:baseline;}
.brand i{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ink); margin-left:3px; box-shadow:0 0 0 3px var(--lime);}
.nav{display:flex; gap:2px; padding:5px; background:rgba(255,253,248,.7); border:1px solid var(--line); border-radius:999px; backdrop-filter:blur(10px);}
.nav a{font-size:14px; font-weight:500; padding:9px 16px; border-radius:999px; color:var(--ink-soft); transition:background .2s, color .2s;}
.nav a:hover{background:var(--ink); color:#fff;}
.hdr-cta{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; background:var(--ink); color:#fff; padding:12px 18px 12px 20px; border-radius:999px;}
.hdr-cta kbd{font-family:var(--body); font-size:11px; background:rgba(255,255,255,.14); padding:3px 7px; border-radius:6px;}
.burger{display:none;}
.hdr .nav a, .hdr .hdr-cta, .hdr .brand, .mnav a{text-decoration:none;}
.mnav{display:none;}
@media (max-width:1100px){
  .nav, .hdr-cta{display:none;}
  .burger{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;}
  .mnav{position:absolute; left:var(--gutter); right:var(--gutter); top:calc(100% + 4px); background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 30px 60px -30px rgba(14,27,44,.45); padding:10px;}
  .mnav.open{display:block;}
  .mnav a{display:flex; justify-content:space-between; padding:15px 14px; border-radius:var(--r-sm); font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em;}
  .mnav a::after{content:"→"; color:var(--ink-faint);}
  .mnav a:hover{background:var(--paper-deep);}
}
@media (max-width:960px){ :root{--gutter:28px;} }
@media (max-width:640px){
  :root{--gutter:20px;}
  .hdr-in{padding:14px var(--gutter);}
}

/* ---------- Pied de page ---------- */
.foot{background:var(--ink); color:rgba(255,255,255,.65); max-width:1440px; margin:0 auto;}
.foot-top{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:40px; padding:72px var(--gutter) 56px; border-top:1px solid var(--line-light); max-width:1360px; margin:0 auto;}
.foot .brand{color:#fff; margin-bottom:16px;}
.foot .brand i{background:#fff;}
.foot .foot-h{font-size:13px; font-weight:600; color:#fff; margin-bottom:18px;}
.foot li{margin-bottom:11px; font-size:14px;}
.foot a:hover{color:var(--lime);}
.foot-word{font-family:var(--display); font-weight:800; font-size:clamp(80px,17vw,250px); letter-spacing:-.065em; line-height:.8; color:rgba(255,255,255,.06); text-align:center; padding:0 0 10px; user-select:none; white-space:nowrap; overflow:hidden;}
.foot-bottom{max-width:1360px; margin:0 auto; padding:24px var(--gutter) 36px; border-top:1px solid var(--line-light); font-size:12px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.foot a{text-decoration:none;}
.foot ul{list-style:none; margin:0; padding:0;}
.foot-standalone{border-radius:32px 32px 0 0; margin-top:24px;}
@media (max-width:640px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));} .foot-top > div:first-child{grid-column:1 / -1;}
  .foot-standalone{border-radius:22px 22px 0 0;}
}
.nav a[aria-current="page"]{background:var(--ink); color:#fff;}
.mnav a[aria-current="page"]{background:var(--lime);}