/* Feuille commune a toutes les pages du site.
   Extraite des blocs <style> inline, identiques sur les 25 pages.
   Les url() sont relatives a CE fichier (assets/), pas au document. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-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;
}
.u0{display:flex; flex-direction:column; background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); border-radius:12px; overflow:hidden; text-decoration:none; box-shadow:rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 12px 26px -22px; transition:transform .2s, box-shadow .2s;}
.u1{font-size: 10.5px; line-height: 1; background: rgb(228, 240, 242); color: rgb(7, 80, 93); border: 1px solid rgb(207, 228, 232); padding: 4px 8px; border-radius: 6px; transition: 0.15s;}
.u2{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:600; color:rgb(58,50,38); padding:9px 11px; line-height:1.3;}
.u3{display:block; height:104px; background:rgb(249,244,238); border-bottom:1px solid rgba(165,90,55,0.1);}
.u4{flex: 0 0 auto; min-width: 22px; height: 18px; padding: 0px 5px; border-radius: 5px; background: rgb(11, 114, 133); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;}
.u5{background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); border-radius:16px; padding:22px 24px; box-shadow:rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 14px 30px -24px;}
.u6{font-size:12.5px; background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.16); color:rgb(90,80,66); padding:7px 13px; border-radius:999px;}
.u7{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 14px; padding: 18px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.12) 0px 10px 24px -18px; display: flex; flex-direction: column; gap: 12px;}
.u8{font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(90, 106, 110);}
.u9{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgb(165,90,55); margin-bottom:11px;}
.u10{display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: 7px; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.08); color: rgb(11, 114, 133); text-decoration: none; font-size: 16px; font-weight: 700;}
.u11{width:100%; height:100%; object-fit:contain; display:block;}
.u12{display: flex; gap: 9px; padding: 7px 0px; border-top: 1px solid rgba(18, 32, 84, 0.05);}
.u13{width: 7px; height: 7px; border-radius: 50%; background: rgb(213, 227, 230);}
.u14{display:flex; align-items:center; justify-content:center; width:30px; height:28px; border-radius:7px; background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); color:rgb(165,90,55); text-decoration:none; font-size:16px; font-weight:700;}
.u15{flex: 1 1 0%; min-width: 220px; display: flex; align-items: center; gap: 13px; justify-content: flex-end; text-align: right; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 14px; padding: 15px 18px; text-decoration: none; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.14) 0px 14px 30px -24px; transition: transform 0.2s, box-shadow 0.2s;}
.u16{font-size: 12.5px; color: rgb(71, 85, 105); line-height: 1.45;}
.u17{font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(107, 118, 137);}
.u18{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px;}
.u19{position: sticky; top: 14px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(18, 32, 84, 0.08); border-radius: 14px; padding: 10px 14px; margin-bottom: 26px; box-shadow: rgba(16, 30, 60, 0.22) 0px 8px 24px -14px;}
.u20{display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.08); color: rgb(11, 114, 133); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; margin-bottom: 18px; box-shadow: rgba(16, 30, 60, 0.04) 0px 1px 2px;}
.u21{font-size:12.5px; background:#f1f3f7; color:#5a6275; padding:5px 12px; border-radius:999px;}
.u22{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.08); border-radius: 10px; padding: 12px 13px; box-shadow: rgba(16, 30, 60, 0.04) 0px 1px 2px;}
.u23{flex: 1 1 0%; min-width: 220px; display: flex; align-items: center; gap: 13px; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 14px; padding: 15px 18px; text-decoration: none; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.14) 0px 14px 30px -24px; transition: transform 0.2s, box-shadow 0.2s;}
.u24{font-family: 'Schibsted Grotesk', sans-serif; font-size: 11.5px; font-weight: 700; color: rgb(51, 65, 85); line-height: 1.15;}
.u25{position:relative; z-index:1; color:#5a6275; text-decoration:none; padding:8px 12px; border-radius:8px; transition:color 0.2s ease, background 0.2s ease; font-size:14px; white-space:nowrap; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; display:block;}
.u26{font-family: 'Schibsted Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: rgb(22, 40, 45);}
.u27{font-size:15px; color:#3d4457;}
.u28{flex:1 1 0; min-width:220px; display:flex; align-items:center; gap:13px; justify-content:flex-end; text-align:right; background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); border-radius:14px; padding:15px 18px; text-decoration:none; box-shadow:rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 14px 30px -24px; transition:transform .2s, box-shadow .2s;}
.u29{flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(168, 211, 217);}
.u30{display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgb(254, 243, 205); color: rgb(176, 125, 24);}
.u31{position:sticky; top:14px; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border:1px solid rgba(60,45,30,0.1); border-radius:14px; padding:10px 14px; margin-bottom:34px; box-shadow:rgba(60,45,30,0.16) 0px 8px 24px -14px;}
.u32{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:rgb(70,62,50);}
.u33{font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:24px; letter-spacing:-0.02em; margin:0;}
.u34{flex:1 1 0; min-width:220px; display:flex; align-items:center; gap:13px; background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); border-radius:14px; padding:15px 18px; text-decoration:none; box-shadow:rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 14px 30px -24px; transition:transform .2s, box-shadow .2s;}
.u35{font-family: 'Schibsted Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: rgb(11, 114, 133); text-decoration: none; padding: 8px 14px; border-radius: 9px; border: 1px solid rgb(212, 232, 235); background: rgb(255, 255, 255); white-space: nowrap;}
.u36{display:inline-flex; align-items:center; gap:8px; background:rgb(255,255,255); border:1px solid rgba(60,45,30,0.1); color:rgb(165,90,55); font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:7px 13px; border-radius:999px; margin-bottom:20px;}
.u37{background: linear-gradient(135deg, rgb(63, 168, 186), rgb(15, 138, 158)); color: rgb(255, 255, 255); border-radius: 12px; padding: 14px; font-family: 'Schibsted Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: center; display: flex; align-items: center; justify-content: center; box-shadow: rgba(15, 138, 158, 0.6) 0px 10px 22px -12px;}
.u38{display:flex; flex-direction:column; background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); border-radius:16px; padding:22px 24px; text-decoration:none; box-shadow:rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 14px 30px -24px; transition:transform .2s, box-shadow .2s;}
.u39{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:rgb(125,114,96);}
.u40{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 14px; padding: 15px 16px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.14) 0px 12px 26px -22px; transition: transform 0.2s, box-shadow 0.2s;}
.u41{display: flex; align-items: center; justify-content: center; gap: 7px; background: rgb(238, 243, 252); border: 1px solid rgb(212, 232, 235); border-radius: 8px; padding: 7px 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgb(7, 80, 93); text-align: center;}
.u42{background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); border-radius:18px; padding:26px 28px; margin-bottom:48px; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; box-shadow:rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 16px 34px -26px;}
.u43{position:absolute; top:14px; left:14px; pointer-events:none; background:rgba(122,61,34,0.86); color:#fff; font-family:'Schibsted Grotesk',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:6px 12px; border-radius:999px;}
.u44{margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; background: rgb(230, 244, 245); color: rgb(11, 114, 133); padding: 3px 8px; border-radius: 6px;}
.u45{position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 10px; color: rgb(90, 106, 110);}
.u46{font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:30px; margin:0 0 10px; letter-spacing:-0.015em;}
.u47{background:#fff; border:1px solid rgba(11,114,133,0.14); border-radius:12px; padding:12px 14px; text-decoration:none; color:#0f172a; font-family:'Schibsted Grotesk',sans-serif; font-size:14.5px; font-weight:600;}
.u48{background: radial-gradient(1200px 680px at 88% -12%, rgb(227, 238, 240) 0%, rgb(240, 244, 244) 48%, rgb(244, 246, 246) 78%); min-height: 100vh; font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; color: rgb(22, 40, 45);}
.u49{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14.5px; font-weight: 700; color: rgb(30, 41, 59); letter-spacing: -0.01em; line-height: 1.2;}
.u50{font-family:'Schibsted Grotesk',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#9aa1b2;}
.u51{font-family:'Schibsted Grotesk',sans-serif; font-size:13px; font-weight:600; color:rgb(165,90,55); text-decoration:none; padding:8px 14px; border-radius:9px; border:1px solid rgb(228,214,201); background:rgb(255,255,255); white-space:nowrap;}
.u52{border-radius:20px; overflow:hidden; width:100%; background:rgb(255,255,255); border:1px solid rgba(165,90,55,0.14); box-shadow:rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.2) 0px 26px 56px -30px; margin-bottom:44px;}
.u53{font-size: 13px; color: rgb(61, 76, 80); line-height: 1.5;}
.u54{background:radial-gradient(1200px 680px at 88% -12%, rgb(244,227,214) 0%, rgb(249,242,234) 46%, rgb(247,243,236) 78%); min-height:100vh; font-family:'Hanken Grotesk',sans-serif; -webkit-font-smoothing:antialiased; color:rgb(58,50,38);}
.u55{font-family:'Schibsted Grotesk',sans-serif; font-size:19px; font-weight:700; letter-spacing:-0.01em; color:#0f172a; line-height:1;}
.u56{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 14px; padding: 18px 20px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.12) 0px 12px 26px -18px; text-align: center;}
.u57{font-size:13.5px; color:rgb(90,80,66); line-height:1.55;}
.u58{display: flex; align-items: center; gap: 7px; margin-bottom: 7px;}
.u59{margin-top:auto; align-self:flex-start; font-family:'Schibsted Grotesk',sans-serif; font-size:14.5px; font-weight:600; color:#0f172a; padding:12px 22px; border-radius:11px; text-decoration:none; border:1.5px solid #d7dce5;}
.u60{display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgb(230, 244, 245); cursor: pointer;}
.u61{font-size: 13px; color: rgb(71, 85, 105); line-height: 1.55;}
.u62{flex: 0 0 auto; width: 30px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(163, 172, 192);}
.u63{flex: 1 1 0%; height: 6px; border-radius: 4px; background: rgb(238, 241, 246); overflow: hidden;}
.u64{flex: 0 0 auto; width: 92px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgb(255, 255, 255); border: 1px solid rgb(197, 224, 229); color: rgb(11, 114, 133); padding: 6px 8px; border-radius: 8px;}
.u65{flex: 0 0 auto; width: 30px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(71, 85, 105);}
.u66{font-family: 'Schibsted Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(154, 161, 178); margin-bottom: 7px;}
.u67{font-size: 12.5px; color: rgb(51, 65, 85); line-height: 1.45; margin-top: 8px;}
.u68{display: grid; grid-template-columns: 48px 1.4fr 1.4fr 1fr 1fr 0.7fr 0.6fr; align-items: center; padding: 13px 22px; border-top: 1px solid rgba(18, 32, 84, 0.05); font-size: 14px; color: rgb(22, 40, 45); transition: background 0.15s;}
.u69{width:5px; height:22px; border-radius:3px; background:rgb(165,90,55);}
.u70{flex: 0 0 auto; margin-top: 1px; width: 16px; height: 16px; border-radius: 5px; background: rgb(230, 244, 245); color: rgb(11, 114, 133); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;}
.u71{display: flex; align-items: center; gap: 11px; padding-top: 9px; border-top: 1px solid rgba(18, 32, 84, 0.06); font-size: 11px; color: rgb(90, 106, 110);}
.u72{width: 30px; height: 30px; border-radius: 9px; background: rgb(11, 114, 133); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.u73{margin-top: 6px; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(11, 114, 133); opacity: 0.55;}
.u74{font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(107, 118, 137); line-height: 1.3;}
.u75{display: flex; align-items: center; gap: 16px; padding: 15px 24px; text-decoration: none; border-top: 1px solid rgba(18, 32, 84, 0.06); transition: background 0.15s;}
.u76{font-family: 'Schibsted Grotesk', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: rgb(15, 23, 42);}
.u77{font-size: 11px; font-weight: 600; background: rgb(228, 240, 242); color: rgb(11, 114, 133); padding: 3px 9px; border-radius: 7px;}
.u78{width:22px; height:22px; border-radius:50%; background:#eef2fb; display:inline-flex; align-items:center; justify-content:center;}
.u79{flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-family: 'Schibsted Grotesk', sans-serif; font-size: 12px; font-weight: 700; color: rgb(22, 163, 74); background: rgb(231, 246, 236); padding: 3px 9px; border-radius: 999px;}
.u80{display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgb(237, 233, 254); color: rgb(109, 91, 208);}
.u81{display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgb(228, 240, 242); color: rgb(11, 114, 133);}
.u82{display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgb(231, 247, 239); color: rgb(5, 150, 105);}
.u83{width:42px;height:42px;border-radius:10px;background:#f1f3f7;display:flex;align-items:center;justify-content:center;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:13px;color:#5a6275;margin-bottom:14px;}
.u84{width: 7px; height: 7px; border-radius: 50%; background: rgb(11, 114, 133);}
.u85{font-family:'Schibsted Grotesk',sans-serif; font-size:22px; font-weight:700; color:#0f172a; margin-bottom:8px;}
.u86{font-family:'Schibsted Grotesk',sans-serif; font-size:15px; font-weight:700; color:rgb(58,50,38);}
.u87{margin-top: 6px; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(109, 91, 208); opacity: 0.55;}
.u88{font-family: 'Schibsted Grotesk', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: rgb(15, 23, 42); line-height: 1; margin-top: 9px;}
.u89{flex: 0 0 auto; width: 92px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgb(228, 240, 242); color: rgb(11, 114, 133); padding: 6px 8px; border-radius: 8px;}
.u90{display: flex; align-items: center; gap: 5px; background: rgb(244, 246, 252); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 9px; padding: 3px;}
.u91{font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgb(100, 116, 139); padding: 0px 6px; white-space: nowrap;}
.u92{width:24px; height:24px; border-radius:50%; background:#0b7285; display:inline-flex; align-items:center; justify-content:center;}
.u93{font-size: 20px; color: rgb(11, 114, 133); font-weight: 700; line-height: 1;}
.u94{flex: 0 0 auto; font-family: 'Schibsted Grotesk', sans-serif; font-size: 15.5px; font-weight: 600; color: rgb(15, 23, 42); min-width: 172px;}
.u95{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 20px; padding: 28px 30px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.12) 0px 14px 32px -20px;}
.u96{margin-top: 6px; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(15, 138, 158);}
.u97{flex: 0 0 auto; width: 46px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: rgb(107, 118, 137);}
.u98{font-family: 'Schibsted Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; color: rgb(22, 40, 45); line-height: 1.3;}
.u99{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: rgb(11, 114, 133); text-decoration: none; white-space: nowrap;}
.u100{flex: 0 0 auto; width: 46px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: rgb(15, 23, 42);}
.u101{display: flex; align-items: center; gap: 7px;}
.u102{flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: rgb(182, 188, 203); width: 22px;}
.u103{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;background:#e0eff2;border:1px solid rgba(11,114,133,0.20);display:flex;align-items:center;justify-content:center;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:13px;color:#0b7285;}
.u104{width:46px;height:46px;border-radius:11px;background:#f1f3f7;display:flex;align-items:center;justify-content:center;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:13px;color:#5a6275;flex:0 0 auto;}
.u105{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#17566e; min-width:22px;}
.u106{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#123f48; min-width:22px;}
.u107{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: rgb(100, 116, 139); white-space: nowrap;}
.u108{font-size: 11.5px; color: rgb(71, 85, 105);}
.u109{font-size: 12px; color: rgb(71, 85, 105); line-height: 1.45;}
.u110{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(23,86,110,0.18);}
.u111{font-size: 9.5px; line-height: 1; background: rgb(228, 240, 242); color: rgb(7, 80, 93); border: 1px solid rgb(207, 228, 232); padding: 3px 7px; border-radius: 5px;}
.u112{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#0f8a9e,#07505d);color:#fff;font-family:'Schibsted Grotesk',sans-serif;font-size:13px;font-weight:700;margin-bottom:18px;box-shadow:0 7px 16px -7px rgba(11,114,133,.6);}
.u113{display: flex; align-items: center; gap: 8px;}
.u114{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(18,63,72,0.18);}
.u115{font-family: 'Schibsted Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: rgb(22, 40, 45);}
.u116{display: flex; gap: 4px; margin-top: 6px;}
.u117{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgb(165,90,55); margin-bottom:10px;}
.u118{background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.74)); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 18px; backdrop-filter: blur(12px); padding: 22px 24px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.1) 0px 12px 28px -16px;}
.u119{padding:12px; display:flex; justify-content:center; background:#e0eff2; align-self:stretch; align-items:center;}
.u120{font-family:'Schibsted Grotesk',sans-serif; font-size:14px; font-weight:600; color:rgb(125,114,96); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.u121{font-family: 'Schibsted Grotesk', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: rgb(100, 116, 139); margin-top: 6px;}
.u122{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14px; font-weight: 800; color: rgb(11, 114, 133); letter-spacing: 0.02em; margin-bottom: 7px;}
.u123{font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#9aa1b2; margin-bottom:10px;}
.u124{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#c9452e; min-width:22px;}
.u125{margin-top: 30px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: rgb(163, 172, 192); text-align: center;}
.u126{color:rgb(81,151,115); font-weight:800;}
.u127{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(201,69,46,0.18);}
.u128{grid-column:1 / -1; width:100%; box-sizing:border-box; background:#fff; border:1px solid rgba(11,114,133,0.16); border-radius:14px; padding:22px 24px; display:flex; gap:16px; align-items:flex-start;}
.u129{flex: 1 1 0%; min-width: 0px; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 16px; padding: 20px 18px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.12) 0px 12px 28px -18px; display: flex; flex-direction: column;}
.u130{font-family: 'Schibsted Grotesk', sans-serif; font-size: 12.5px; font-weight: 700; color: rgb(15, 23, 42); margin-bottom: 5px;}
.u131{background: rgb(255, 255, 255); border: 1px solid rgb(217, 221, 230); border-radius: 9px; padding: 9px 14px; font-family: 'Schibsted Grotesk', sans-serif; font-size: 12px; font-weight: 700; color: rgb(51, 65, 85); box-shadow: rgba(16, 30, 60, 0.05) 0px 1px 2px;}
.u132{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; align-items:center; border-top:1px solid #eef0f4;}
.u133{display:inline-flex; align-items:center; gap:8px; background:#e0eff2; color:#0b7285; font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-bottom:20px;}
.u134{font-size: 11.5px; font-weight: 600; background: rgb(228, 240, 242); color: rgb(11, 114, 133); padding: 4px 11px; border-radius: 999px;}
.u135{font-size: 10.5px; line-height: 1; background: rgb(228, 240, 242); color: rgb(7, 80, 93); border: 1px solid rgb(207, 228, 232); padding: 4px 8px; border-radius: 6px;}
.u136{display: grid; grid-template-columns: 208px 1fr; gap: 24px; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 22px; padding: 24px 26px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.12) 0px 14px 32px -20px;}
.u137{padding:12px; display:flex; justify-content:center;}
.u138{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#1a2a3a; min-width:22px;}
.u139{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#175d6b; min-width:22px;}
.u140{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#12333a; min-width:22px;}
.u141{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#2a2a2a; min-width:22px;}
.u142{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(122,113,105,0.18);}
.u143{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#5a534c; min-width:22px;}
.u144{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(125,125,125,0.18);}
.u145{font-family:'Schibsted Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#4a4a4a; min-width:22px;}
.u146{font-family:'Schibsted Grotesk',sans-serif; font-size:22px; font-weight:700; color:#fff; margin-bottom:8px;}
.u147{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(23,93,107,0.18);}
.u148{display:flex; align-items:center; gap:5px; background:rgb(249,244,238); border:1px solid rgba(165,90,55,0.12); border-radius:9px; padding:3px;}
.u149{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: rgb(15, 23, 42); margin-bottom: 4px;}
.u150{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(26,42,58,0.18);}
.u151{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(18,51,58,0.18);}
.u152{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(42,42,42,0.18);}
.u153{font-family:'Schibsted Grotesk',sans-serif; font-size:14px; font-weight:600; color:rgb(165,90,55); text-decoration:none; white-space:nowrap;}
.u154{font-family:'Schibsted Grotesk',sans-serif; font-size:18px; font-weight:700; color:rgb(58,50,38); letter-spacing:-0.01em; margin-bottom:8px;}
.u155{display: flex; gap: 14px; justify-content: space-between; align-items: stretch; margin-top: 44px; flex-wrap: wrap;}
.u156{text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(148, 163, 184); padding-bottom: 26px;}
.u157{font-size:20px; color:rgb(165,90,55); font-weight:700; line-height:1;}
.u158{display: flex; flex-direction: column; gap: 10px;}
.u159{background: rgb(228, 240, 242); border: 1px solid rgb(197, 224, 229); border-radius: 10px; padding: 11px 12px; font-family: 'Schibsted Grotesk', sans-serif; font-size: 12px; font-weight: 700; color: rgb(11, 114, 133); line-height: 1.25;}
.u160{width:6px;height:6px;border-radius:50%;background:#0b7285;margin-top:7px;flex:0 0 auto;}
.u161{font-family:'Schibsted Grotesk',sans-serif; font-weight:800; font-size:44px; letter-spacing:-0.03em; line-height:1.04; margin:0 0 14px;}
.u162{font-family:'Schibsted Grotesk',sans-serif; font-size:20px; font-weight:700; color:#0f172a; letter-spacing:-0.01em; margin-bottom:9px;}
.u163{writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(100, 116, 139); text-align: center;}
.u164{display: flex; flex-wrap: wrap; gap: 5px;}
.u165{width:30px;height:30px;border-radius:9px;background:rgb(165,90,55);display:flex;align-items:center;justify-content:center;flex:none;}
.u166{font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 36px; letter-spacing: -0.025em; line-height: 1.05; margin: 0px;}
.u167{background: rgb(255,255,255); border: 1px solid rgba(165,90,55,0.14); border-radius: 16px; padding: 22px 24px; box-shadow: rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 14px 30px -24px;}
.u168{background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.74)); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 18px; backdrop-filter: blur(12px); padding: 20px 22px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.1) 0px 12px 28px -16px;}
.u169{font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:rgb(125,114,96); padding:0 6px; white-space:nowrap;}
.u170{display: inline-block; font-family: 'Schibsted Grotesk', sans-serif; font-size: 12px; font-weight: 600; background: rgb(237, 233, 254); color: rgb(94, 76, 190); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;}
.u171{background:#fff; border:1px solid rgba(11,114,133,0.16); border-radius:18px; overflow:hidden; display:flex; flex-direction:column;}
.u172{font-family: 'Schibsted Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(138, 150, 154); padding: 16px 13px 7px;}
.u173{margin-top: 6px; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(5, 150, 105); opacity: 0.55;}
.u174{margin-top: 6px; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(225, 29, 72); opacity: 0.55;}
.u175{font-family:'Schibsted Grotesk',sans-serif; font-size:15px; font-weight:700; letter-spacing:-0.01em; color:rgb(58,50,38);}
.u176{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; color:rgb(170,158,140); text-align:center;}
.u177{display: flex; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(18, 32, 84, 0.06);}
.u178{display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; background: rgb(255,255,255); border: 1px solid rgba(165,90,55,0.14); border-radius: 20px; padding: 28px; box-shadow: rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 16px 34px -26px;}
.u179{font-size: 12px; color: rgb(71, 85, 105); line-height: 1.45; margin-top: 8px;}
.u180{display: flex; width: 17px; height: 17px; border-radius: 50%; background: rgb(230, 244, 245); color: rgb(11, 114, 133); align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1;}
.u181{text-align: center; background: rgb(228, 240, 242); border: 1px solid rgb(197, 224, 229); border-radius: 12px; padding: 12px; font-family: 'Schibsted Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: rgb(11, 114, 133); letter-spacing: 0.02em;}
.u182{display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: rgb(70,62,50);}
.u183{margin-top:auto; font-family:'Schibsted Grotesk',sans-serif; font-size:13.5px; font-weight:600; color:rgb(165,90,55);}
.u184{position: relative; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 18px; padding: 24px 26px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.12) 0px 14px 32px -20px; min-height: 248px;}
.u185{width: 38px; height: 38px; border-radius: 50%; background: rgba(18, 32, 84, 0.08); display: flex; align-items: center; justify-content: center; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 13px; color: rgb(90, 106, 110);}
.u186{color: rgb(203, 213, 225); font-size: 14px;}
.u187{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: rgb(22, 40, 45);}
.u188{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 16px; overflow: hidden; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.14) 0px 14px 30px -20px;}
.u189{display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgb(223, 240, 243); color: rgb(11, 114, 133);}
.u190{display:flex; align-items:center; gap:13px; margin-bottom:18px;}
.u191{display:block; text-decoration:none;}
.u192{display: flex; gap: 12px; align-items: baseline;}
.u193{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 14px; padding: 18px 20px; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.14) 0px 12px 26px -22px; transition: transform 0.2s, box-shadow 0.2s;}
.u194{display:flex; gap:14px; justify-content:space-between; align-items:stretch; flex-wrap:wrap; margin-bottom:30px;}
.u195{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 14px; padding: 18px;}
.u196{font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(11, 114, 133);}
.u197{display: flex; gap: 8px; align-items: flex-start; justify-content: space-between;}
.u198{flex: 0 0 auto; width: 88px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(107, 118, 137);}
.u199{display: flex; flex-direction: column; gap: 2px; min-width: 0px; align-items: flex-end;}
.u200{background: rgb(247, 249, 252); border: 1px solid rgba(18, 32, 84, 0.06); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 11px;}
.u201{display: flex; align-items: center; gap: 9px; text-decoration: none;}
.u202{font-size:19px; line-height:1.5; color:rgb(90,80,66); max-width:720px; margin:0 0 22px; text-wrap:pretty;}
.u203{display: grid; grid-template-columns: 48px 1.4fr 1.4fr 1fr 1.1fr 0.7fr 0.6fr; align-items: center; padding: 14px 22px; border-top: 1px solid rgba(18, 32, 84, 0.05); font-size: 14px; color: rgb(22, 40, 45); transition: background 0.15s;}
.u204{font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(90, 106, 110); margin-bottom: 10px;}
.u205{font-family: 'Schibsted Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; background: rgb(253, 236, 235); color: rgb(194, 65, 45); padding: 4px 9px; border-radius: 7px; white-space: nowrap;}
.u206{position:relative; height:200px; overflow:hidden; border-bottom:1px solid #eef0f4; background:#f4f5f9;}
.u207{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:40px;}
.u208{font-size:11px; font-weight:700; letter-spacing:0.1em; color:#9aa1b2; text-transform:uppercase; margin-bottom:8px;}
.u209{font-family:'Schibsted Grotesk',sans-serif; font-size:24px; font-weight:700; color:#0b7285;}
.u210{font-family: 'Schibsted Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: rgb(15, 23, 42); line-height: 1.18; letter-spacing: -0.015em; margin-bottom: 8px;}
.u211{font-size:16px; color:#6a7184; line-height:1.6; max-width:680px; margin:0 0 26px;}
.u212{width: 7px; height: 7px; border-radius: 50%; background: rgb(194, 65, 45);}
.u213{padding:14px 22px; font-size:14.5px; font-weight:500; color:#3a4252;}
.u214{display: flex; align-items: center; background: rgb(228, 240, 242); border: 1px solid rgb(197, 224, 229); border-radius: 14px; padding: 18px 16px;}
.u215{flex: 1 1 0%; display: flex; flex-direction: column; align-items: center;}
.u216{display:grid; grid-template-columns:0.85fr 1.15fr; gap:26px; align-items:start;}
.u217{color: rgb(90, 106, 110);}
.u218{margin-top: 6px; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(217, 119, 6); opacity: 0.55;}
.u219{background:#fff; border:1px solid rgba(11,114,133,0.16); border-radius:16px; padding:28px 30px;}
.u220{display: flex; flex-direction: column; gap: 11px; background: rgb(242, 246, 246); border: 1px solid rgba(18, 32, 84, 0.06); border-radius: 16px; padding: 12px 12px 14px;}
.u221{scroll-margin-top:84px; padding-bottom:72px;}
.u222{font-family: 'Schibsted Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: rgb(15, 23, 42); letter-spacing: -0.01em;}
.u223{flex: 1 1 0%; font-size: 13.5px; color: rgb(107, 118, 137); min-width: 0px;}
.u224{flex: 0 0 auto; color: rgb(11, 114, 133); font-size: 17px; font-weight: 700;}
.u225{background: rgb(255, 255, 255); border: 1px solid rgba(11, 114, 133, 0.14); border-radius: 18px; overflow: hidden; box-shadow: rgba(16, 30, 60, 0.03) 0px 1px 2px, rgba(16, 30, 60, 0.16) 0px 16px 34px -26px;}
.u226{padding: 0px 12px; text-align: center; font-size: 11.5px; line-height: 1.4; color: rgb(100, 116, 139);}
.u227{font-family: 'Schibsted Grotesk', sans-serif; font-size: 16.5px; font-weight: 700; color: rgb(255, 255, 255); letter-spacing: -0.01em; line-height: 1.25;}
.u228{font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(148, 163, 184);}
.u229{width: 7px; height: 7px; border-radius: 50%; background: rgb(11, 114, 133);}
.u230{font-family: 'Schibsted Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: rgb(71, 85, 105); margin-bottom: 8px;}
.u231{display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.u232{font-size: 13px; color: rgb(71, 85, 105); line-height: 1.5; margin-bottom: 15px;}
.u233{background: rgb(244, 246, 252); border: 1px solid rgba(18, 32, 84, 0.06); border-radius: 10px; padding: 12px 13px;}
.u234{background: rgb(241, 249, 245); border: 1px solid rgba(18, 32, 84, 0.06); border-radius: 10px; padding: 12px 13px;}
.u235{display: flex; flex-direction: column; gap: 12px;}
.u236{font-size:16px; color:rgb(90,80,66); line-height:1.6; max-width:760px; margin:0 0 22px;}
.u237{font-family:'Schibsted Grotesk',sans-serif; font-size:15.5px; font-weight:600; color:#0f172a; line-height:1.3;}
/* display:block sur l'image ET son <picture> : sans ca, tous deux restent
   inline et s'assoient sur la ligne de base, ce qui laisse l'espace du
   jambage sous l'image et fait apparaitre le fond du conteneur en filet.
   Les <picture style="display:contents"> des portraits ne sont pas touches
   (le style inline l'emporte). */
.u238{width:100%;height:100%;display:block;}
picture{display:block;}
.u239{background: rgb(255,255,255); border: 1px solid rgba(165,90,55,0.14); border-radius: 16px; padding: 24px; box-shadow: rgba(60,45,30,0.03) 0px 1px 2px, rgba(60,45,30,0.14) 0px 14px 30px -24px;}
.u240{display: flex; align-items: center; gap: 12px; min-width: 0px;}
.u241{font-size: 11.5px; color: rgb(138, 147, 168); margin-top: 8px;}
.u242{font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(107, 118, 137); margin-bottom: 12px;}
.u243{display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; margin-bottom:24px;}
.u244{background:#f8f9fb; border:1px solid rgba(11,114,133,0.13); border-radius:14px; padding:24px;}
.u245{display: flex; gap: 6px; flex: 0 0 auto; align-items: center;}
.u246{background:linear-gradient(120deg,#fdf3ea,#fbf7f2); border:1px solid rgba(201,69,46,0.18); border-radius:18px; padding:24px 26px; transition:transform .2s ease, box-shadow .2s ease;}
.u247{display:flex; flex-direction:column; gap:3px;}
.u248{font-size: 13px; color: rgb(107, 118, 137); text-align: right; line-height: 1.55; max-width: 220px; padding-bottom: 4px;}
.u249{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:48px;}
.u250{display:flex; flex-direction:column; gap:2px; min-width:0; align-items:flex-end;}
.u251{height: 100%; width: 100%; background: linear-gradient(90deg, rgb(63, 168, 186), rgb(11, 114, 133)); border-radius: 4px;}
.u252{background:#fff; border:1px solid rgba(11,114,133,0.16); border-radius:14px; padding:22px;}
.u253{display: flex; flex-direction: column; gap: 2px; min-width: 0px;}
.u254{color:rgb(200,190,175); font-size:14px;}
.u255{font-size:14px; color:#6a7184; line-height:1.55; margin:0;}
.u256{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14.5px; font-weight: 700; color: rgb(15, 23, 42);}
.u257{font-family: 'Schibsted Grotesk', sans-serif; font-size: 19px; font-weight: 700; color: rgb(15, 23, 42); letter-spacing: -0.01em;}
.u258{font-family: 'Schibsted Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: rgb(15, 23, 42);}
.u259{font-family: 'Schibsted Grotesk', sans-serif; font-size: 12.5px; font-weight: 700; color: rgb(15, 23, 42); margin-bottom: 8px;}
.u260{font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(165,90,55); margin-bottom: 12px;}
.u261{background:#fff; border:1px solid rgba(11,114,133,0.16); border-radius:16px; padding:28px 24px; text-align:center;}
.u262{display: grid; grid-template-columns: 140px repeat(4, 1fr); gap: 12px; margin-bottom: 12px; align-items: stretch;}
.u263{display: flex; flex-direction: column; gap: 1px;}
.u264{display: flex; gap: 9px;}
.u265{display: grid; grid-template-columns: 40px 1fr; gap: 14px; background: rgb(247, 249, 252); border: 1px solid rgba(18, 32, 84, 0.06); border-radius: 14px; padding: 18px;}
.u266{font-size: 10px; font-weight: 600; color: rgb(255, 255, 255);}
.u267{font-family:'Schibsted Grotesk',sans-serif;font-size:15px;font-weight:600;}
.u268{font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgb(11, 114, 133);}
.u269{border-radius:12px; overflow:hidden; background:#f2f3f6; aspect-ratio:1/1;}
.u270{display:flex; align-items:center; gap:11px; margin:0 0 18px;}
.u271{margin-top: 13px; display: flex; flex-direction: column; gap: 7px;}
.u272{font-size:14px; color:#475066; line-height:1.5;}
.u273{display: flex; align-items: baseline; gap: 8px;}
.u274{font-size:13.5px; color:rgb(90,80,66); line-height:1.55; margin:0 0 16px;}
.u275{position:relative; z-index:1; color:#5a6275; text-decoration:none; padding:8px 15px; border-radius:9px; transition:color 0.2s ease;}
.u276{background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); border-radius: 12px; padding: 9px 14px; box-shadow: rgba(16, 30, 60, 0.04) 0px 1px 2px;}
.u277{font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#d4c4a8; margin-bottom:10px;}
.u278{font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#c9452e; margin-bottom:10px;}
.u279{display: flex; align-items: center; justify-content: center; background: rgb(241, 243, 247); border-radius: 10px; padding: 8px;}
.u280{font-size: 12.5px; background: rgb(255, 255, 255); border: 1px solid rgba(18, 32, 84, 0.07); color: rgb(71, 85, 105); padding: 7px 13px; border-radius: 999px;}
.u281{font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#a8d3d9; margin-bottom:8px;}
.u282{font-family: 'Schibsted Grotesk', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: rgb(15, 23, 42); line-height: 1;}
.u283{font-size: 13.5px; color: rgb(71, 85, 105); line-height: 1.45;}
.u284{position: absolute; left: 0px; right: 0px; top: 100px; height: 1px; background: rgba(18, 32, 84, 0.16);}
.u285{position: absolute; left: 0px; right: 0px; top: 170px; height: 1px; background: rgba(18, 32, 84, 0.05);}
.u286{position: absolute; left: 0px; right: 0px; top: 30px; height: 1px; background: rgba(18, 32, 84, 0.05);}
.u287{position: absolute; left: 0px; right: 0px; top: 90px; height: 2px; background: rgba(18, 32, 84, 0.12);}
.u288{display: flex; flex-direction: column; gap: 0px; border-right: 1px solid rgba(18, 32, 84, 0.06); padding-right: 22px;}
.u289{font-size:14px; color:#6a7184; line-height:1.55; margin:0 0 18px;}
.u290{font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin: 0;}
.u291{font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 12px; color: rgb(58,50,38);}
.u292{display:flex; align-items:center; gap:9px; text-decoration:none;}
.u293{display: flex; gap: 18px; align-items: flex-start; padding-top: 15px; border-top: 1px solid rgba(18, 32, 84, 0.06);}
.u294{font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgb(90, 106, 110); margin-left: auto;}
.u295{padding:24px 26px; display:flex; flex-direction:column; flex:1;}
.u296{font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgb(107, 118, 137);}
.u297{display: grid; grid-template-columns: 104px repeat(5, 1fr); gap: 10px; margin-bottom: 10px; align-items: stretch;}
.u298{background:#fff; border:1px solid rgba(11,114,133,0.16); border-radius:14px; padding:26px 28px;}
.u299{position: relative; width: 100%; height: 170px; border-left: 1px solid rgba(18, 32, 84, 0.07);}
.u300{font-family: 'Schibsted Grotesk', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: rgb(15, 23, 42);}
.u301{font-family:'Schibsted Grotesk',sans-serif; font-size:16px; font-weight:700; color:#0f172a;}
.u302{display:flex; align-items:center; gap:11px; margin:0 0 14px;}
.u303{display:flex; align-items:center; gap:11px; margin:0 0 16px;}
.u304{padding: 0px 12px; display: flex; flex-direction: column; gap: 5px;}
.u305{padding: 0px 9px; display: flex; flex-direction: column; gap: 13px;}
.u306{flex: 1 1 0%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;}
.u307{display:flex; justify-content:space-between; gap:12px; align-items:baseline;}
.u308{display: flex; align-items: center; gap: 9px; margin-bottom: 11px;}
.u309{font-family: 'Schibsted Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: rgb(15, 23, 42); margin-top: 2px;}
.u310{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.u311{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px;}
.u312{display:flex; flex-direction:column; gap:2px; min-width:0;}
.u313{width:46px;height:46px;border-radius:13px;background:#e0eff2;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.u314{width:44px;height:44px;border-radius:12px;background:#e0eff2;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.u315{font-family: 'Schibsted Grotesk', sans-serif; font-size: 30px; font-weight: 700; color: rgb(22, 40, 45); line-height: 1;}
.u316{font-size: 12.5px; color: rgb(100, 116, 139); font-style: italic; line-height: 1.5; margin-bottom: 16px;}
.u317{background: rgb(255, 255, 255); border: 1px solid rgb(217, 221, 230); border-radius: 11px; padding: 12px 16px; text-align: center;}
.u318{flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgb(11, 114, 133);}
.u319{color: rgb(11, 114, 133); font-weight: 700;}
.u320{width:100%; padding:40px 32px 80px;}
.u321{display:flex; align-items:center; gap:10px; min-width:0;}
.u322{font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;}
.u323{font-weight: 600; color: rgb(22, 40, 45);}
.u324{display: flex; flex-wrap: wrap; gap: 6px;}
.u325{color: rgb(81,151,115); font-weight: 800;}
/* Cadre des captures de studio-decision-etude-de-cas. aspect-ratio cale sur
   les captures (1910x935) plutot qu'une hauteur fixe : a 280 px de haut, la
   colonne depassait la largeur utile de l'image et laissait jusqu'a 146 px de
   vide de chaque cote (object-fit: contain). */
.u326{border-radius: 14px; overflow: hidden; aspect-ratio: 1910/935; background: rgb(247,243,236); border: 1px solid rgba(165,90,55,0.12);}
.u327{font-size: 11px; line-height: 1.4; color: rgb(148, 163, 184);}
.u328{flex:1; min-width:150px; background:#fff; border:1px solid rgba(165,90,55,0.14); border-radius:12px; padding:11px 14px;}
.u329{background: linear-gradient(135deg, rgb(63, 168, 186), rgb(15, 138, 158)); padding: 16px 20px;}
.u330{font-size: 13.5px; color: rgb(15, 23, 42); font-weight: 600; line-height: 1.45;}
.u331{font-size: 12px; color: rgb(61, 76, 80); line-height: 1.4;}
.u332{font-size:12.5px; color:#9aa1b2; white-space:nowrap; flex:0 0 auto;}
.u333{font-size:12px; color:#8a92a3; margin-top:4px;}
.u334{font-family: 'Schibsted Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: rgb(15, 23, 42);}
.u335{font-family: 'Schibsted Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: rgb(22, 40, 45);}
.u336{width: 2px; height: 16px; background: rgb(203, 213, 225);}
.u337{font-family: 'Schibsted Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: rgb(51, 65, 85);}
.u338{background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:18px 20px;}
.u339{font-size:12.5px; background:#10404c; color:#a8d3d9; padding:6px 12px; border-radius:999px;}
.u340{font-size:13.5px; color:#6a7184; margin-top:3px; line-height:1.5;}
.u341{font-family:'Schibsted Grotesk',sans-serif; font-size:15px; font-weight:600; color:#0b7285; text-decoration:none;}
.u342{background: rgb(255, 255, 255); border: 1px solid rgba(11, 114, 133, 0.14); padding: 6px 11px; border-radius: 8px;}
.u343{font-family: 'Schibsted Grotesk', sans-serif; font-size: 15px; font-weight: 700;}
.u344{font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgb(163, 172, 192); margin-top: 8px;}
.u345{display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(100, 116, 139);}
.u346{width: 9px; height: 9px; border-radius: 50%; background: rgb(11, 114, 133);}
.u347{font-size:14px; color:#0b7285; font-weight:600; margin-top:7px;}
.u348{display:flex; gap:24px; margin-top:18px; padding-top:18px; border-top:1px solid #eef0f4;}
.u349{background: rgb(255,255,255); border: 1px solid rgba(165,90,55,0.14); padding: 6px 11px; border-radius: 8px;}
.u350{display: flex; justify-content: center;}
.u351{color:#0f172a;font-weight:600;}
.u352{font-size: 12.5px; color: rgb(71, 85, 105); line-height: 1.55; margin-top: 11px;}
.u353{color: rgb(194, 65, 45); font-size: 13px; line-height: 1;}
.u354{font-size: 12px; color: rgb(90, 106, 110); line-height: 1.45; margin-top: 6px;}
.u355{display: flex; gap: 9px; align-items: flex-start;}
.u356{font-size: 9px; color: rgb(90, 106, 110); font-family: monospace;}
.u357{position: relative; width: 100%; height: 206px; margin-top: 8px;}
.u358{display: flex; flex-direction: column; gap: 9px;}
.u359{font-family:'Schibsted Grotesk',sans-serif; font-size:16px; font-weight:700; margin-bottom:6px;}
.u360{font-size:13px; color:#6a7184; margin-top:8px; line-height:1.5;}
.u361{display:flex; align-items:center; gap:8px;}
.u362{background:#fff; border:1px solid rgba(11,114,133,0.16); border-radius:16px; padding:30px 32px;}
.u363{display: flex; gap: 10px;}
.u364{display: inline-flex; gap: 5px;}
.u365{flex: 1 1 0%; height: 1px; background: rgba(18, 32, 84, 0.08);}
.u366{flex: 1 1 0%; height: 1px; background: rgba(18, 32, 84, 0.07);}
.u367{font-size: 13.5px; color: rgb(71, 85, 105); line-height: 1.55;}
.u368{color: rgb(15, 23, 42); font-weight: 600;}
.u369{width: 5px; height: 22px; border-radius: 3px; background: rgb(165,90,55);}
.u370{font-family:'Schibsted Grotesk',sans-serif; font-size:17px; font-weight:600; color:#0f172a;}
.u371{font-family:'Schibsted Grotesk',sans-serif; font-size:15px; font-weight:600; color:#0f172a;}
.u372{font-size:13px;color:#8a92a3;margin-top:3px;}
.u373{font-size:14px; color:#c8d0e0; line-height:1.55; margin:0;}
.u374{display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px;}
.u375{font-size: 14px; color: rgb(90,80,66); line-height: 1.55;}
.u376{color: rgb(138, 150, 154);}
.u377{display: flex; align-items: center; gap: 10px; margin-bottom: 16px;}
.u378{display: flex; align-items: center; gap: 9px; padding: 3px 4px 1px;}
.u379{display: flex; align-items: center; gap: 12px; padding: 18px 24px; flex-wrap: wrap;}
.u380{display:flex; gap:11px;}
.u381{font-size: 12.5px; color: rgb(107, 118, 137); line-height: 1.45;}
.u382{font-size: 12.5px; color: rgb(109, 91, 208); line-height: 1.45;}
.u383{display: flex; align-items: baseline; justify-content: space-between; gap: 10px;}
.u384{padding-bottom: 8px; border-bottom: 3px solid rgb(109, 91, 208);}
.u385{display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;}
.u386{font-size: 13.5px; color: rgb(125,114,96); margin-top: 8px; line-height: 1.4;}
.u387{font-family:'Schibsted Grotesk',sans-serif; font-size:18px; font-weight:600;}
.u388{font-size: 15px; color: rgb(90,80,66); line-height: 1.6; margin: 0 0 16px;}
.u389{font-size: 14px; color: rgb(51, 65, 85); font-weight: 500;}
.u390{display: flex; justify-content: space-between; align-items: flex-start;}
.u391{flex: 0 0 auto; display: flex; align-items: center; padding: 0px 7px;}
.u392{color:#cdd2dc; font-size:17px;}
.u393{display: flex; align-items: center; gap: 10px; margin-bottom: 18px;}
.u394{display: flex; align-items: center; gap: 9px; margin-bottom: 10px;}
.u395{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.u396{display:flex; align-items:center; gap:13px; margin-bottom:16px;}
.u397{font-size: 13px; color: rgb(90, 106, 110); margin-bottom: 8px;}
.u398{font-size: 11.5px; opacity: 0.85; margin-top: 2px;}
.u399{display: flex; flex-direction: column; gap: 16px;}
.u400{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.u401{font-size: 13px; color: rgb(20, 83, 45); line-height: 1.5;}
.u402{display:flex; flex-direction:column; gap:14px;}
.u403{display:flex; flex-wrap:wrap; gap:8px;}
.u404{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.u405{font-size:14px; color:#bfdde1; line-height:1.6; margin:0;}
.u406{display: flex; align-items: center; gap: 5px;}
.u407{color:#0f172a; font-weight:600;}
.u408{font-size:14px; color:#0b7285; margin-bottom:20px;}
.u409{display: flex; flex-direction: column; gap: 13px;}
.u410{color:#364152; font-weight:600;}
.u411{display: flex; align-items: center; gap: 12px;}
.u412{font-size:12px; color:#8a92a3; margin-top:3px;}
.u413{font-size: 13.5px; color: rgb(107, 118, 137);}
.u414{font-size: 11.5px; color: rgb(148, 163, 184);}
.u415{font-size: 12px; color: rgb(138, 150, 154);}
.u416{color: rgb(15, 23, 42); font-weight: 700;}
.u417{padding-bottom:72px;}
.u418{font-size: 22px; line-height: 1;}
.u419{flex:1; min-width:0;}
.u420{font-size:13.5px; color:#4a5568; display:block; margin-top:6px;}
.u421{font-size: 14px; flex: 1 1 0%;}
.u422{padding: 18px 20px 20px;}

/* Les Bureaux Vides - lisibilité sur fond sombre */
#les-bureaux-vides .u27 { color: #ffffff; }
#les-bureaux-vides .u145 { color: #d8c9a8; }

/* Titres semantiques dont l'apparence reste portee par les classes et styles
   existants : :where() a une specificite nulle, donc ces regles annulent les
   valeurs par defaut du navigateur sans jamais primer sur une regle d'auteur.
   .hx  : element de type bloc promu en titre
   .hx-i: element en ligne promu en titre (reste en ligne) */
:where(.hx, .hx-i) { font-size: inherit; font-weight: inherit; margin: 0; }
:where(.hx-i) { display: inline; }

/* Lien d'evitement, partage par les pages secondaires. index.html et
   side-projects.html en gardent une copie en ligne, posterieure dans la
   cascade et de valeurs identiques. Cible : le <main id="contenu">. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: #0b7285; color: #fff; padding: 12px 20px; border-radius: 0 0 10px 10px;
  font-family: 'Schibsted Grotesk', sans-serif; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 0; outline: 3px solid #0f172a; outline-offset: 2px; }
main:focus { outline: none; }

/* ---------------------------------------------------------------------------
   Adaptation mobile des grilles — vocabulaire data-mob

   Beaucoup de grilles des pages kakemphaton sont declarees en style inline
   sans classe : rien ne permettait de les cibler en CSS, elles restaient donc
   a trois, quatre ou sept colonnes sur telephone. On leur pose un attribut
   data-mob, le meme mecanisme que les data-* deja utilises sur le site.

   Ces regles vivent ici plutot que dans le <style> de chaque page pour
   n'exister qu'en un seul exemplaire. Elles ne s'appliquent qu'aux elements
   effectivement porteurs de l'attribut.

     stack  une seule colonne
     half   deux colonnes — pour les tuiles de chiffres, illisibles empilees
     table  defilement horizontal — pour les tableaux de donnees, qu'empiler
            ligne par ligne rendrait incomprehensibles

   minmax(0,1fr) et non 1fr : un 1fr equivaut a minmax(auto,1fr), dont le
   plancher min-content empeche la colonne de retrecir et fait deborder la
   page au lieu de la faire passer a la ligne.
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
  [data-mob="stack"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-mob="half"]  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  [data-mob="table"] { overflow-x: auto !important; }
  [data-mob="table"] > * { min-width: 660px !important; }

  /* Lignes « 01 Marche & demande » du product canvas : la premiere colonne
     est figee a 208px, ce qui ne laisse presque rien au texte. */
  .u136 { grid-template-columns: minmax(0, 1fr) !important; }

  /* Fil d'Ariane. Le titre de la page y est en white-space:nowrap et poussait
     a lui seul la largeur du document jusqu'a 535px sur un ecran de 375 :
     c'etait la cause unique du debordement de cinq pages Kakemphaton.
     Le laisser se couper suffit — le <nav> est deja en flex-wrap, et .u240,
     le conteneur du fil, porte deja min-width:0.
     Le selecteur vise [data-knav] et non une classe : les 20 fils d'Ariane
     sont des blocs tous differents, dont certains portent le nowrap en style
     en ligne — d'ou le !important, seul moyen d'y primer.
     Autoriser la coupure ne suffit pas : le titre est un element flex, et un
     element flex garde min-width:auto, donc refuse de descendre sous sa
     largeur min-content. Il faut lui rendre le droit de retrecir, et au
     conteneur celui de passer a la ligne. */
  [data-knav] a, [data-knav] span { white-space: normal !important; }
  [data-knav] > * { flex-wrap: wrap !important; }
  [data-knav] > * > * { min-width: 0 !important; }
}

a { color:#0b7285; }
a:hover { color:#07505d; }
.u201, .u201 span, .u15, .u23 { color:#0b7285; }

/* ---------------------------------------------------------------------------
   Bandeau teal des onze livrables Kakemphaton

   Il ouvre chacune des onze pages : fil d'Ariane, navigation de site,
   pagination, kicker, titre, chapo et carte « ce que ca demontre », dans un
   meme aplat degrade sur toute la largeur de la fenetre.

   Il vit DANS <main>. Le kicker, le h1 et le chapo sont du contenu editorial,
   or build_mirror.py ne lit que <main> (CLAUDE.md) : les sortir viderait le
   miroir Markdown de son titre. Le fil d'Ariane, lui, est un <nav>, balise
   deja ignoree par le miroir — le chrome de navigation reste donc hors du .md
   sans qu'on ait a le sortir de <main>.

   Pleine largeur : <main class="u320"> porte un padding de 40px 32px 80px.
   .kk-bandeau--encastre l'annule par des marges negatives de meme valeur ;
   elles ne changent pas sur mobile puisque ce padding n'y change pas non plus.
   Le padding horizontal des rangees reste a 32px, la ou le handoff donne 40 :
   c'est lui qui aligne fil d'Ariane et titre sur le reste de la page, dont la
   gouttiere est celle de .u320.
   app-refonte pose son bandeau directement dans <main>, deja pleine largeur :
   il prend --libre.

   Le bandeau sert aussi aux neuf briques Studio Decision et a leur hub, qui
   reprennent le meme gabarit depuis cette feuille : ce qui leur est propre est
   regroupe en fin de fichier. Le hub Kakemphaton, lui, garde son style en
   ligne.
--------------------------------------------------------------------------- */
.kk-bandeau {
  position: relative;
  overflow: hidden;
  padding: 0 0 88px;
  background: linear-gradient(160deg, #0d5b6b 0%, #0b7285 55%, #0f8a9e 100%);
  color: #fff;
}
/* Marge basse nulle : le premier bloc de chaque page remonte de 56px par
   dessus (.kk-phare), c'est lui qui menage l'espace. */
.kk-bandeau--encastre { margin: -40px -32px 0; }
.kk-bandeau--libre    { margin: 0; }

/* Les deux formes de decor sont des pseudo-elements plutot que des <div> :
   purement graphiques, elles n'ont rien a faire dans le DOM, et le miroir
   Markdown comme les lecteurs d'ecran s'en trouvent d'autant plus propres. */
.kk-bandeau::before, .kk-bandeau::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.kk-bandeau::before {
  top: -160px; right: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
  animation: kk-derive 16s ease-in-out infinite;
}
@keyframes kk-derive { 0%, 100% { transform: translate(0, 0); }
                       50%      { transform: translate(40px, -30px); } }
.kk-bandeau::after {
  bottom: -240px; left: 8%; width: 600px; height: 600px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
}
.kk-bandeau > * { position: relative; z-index: 2; }

/* La feuille se termine par un « a { color:#0b7285 } » global : sur fond teal
   il rendrait les liens illisibles, d'ou ces regles plus specifiques. */
.kk-bandeau a { color: #fff; text-decoration: none; }
.kk-bandeau .kk-fil-lien { color: rgba(255, 255, 255, 0.85); }
.kk-bandeau .kk-fil-lien:hover { color: #fff; }

.kk-bandeau-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 22px 32px;
}
.kk-fil {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
  font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
}
.kk-fil-accueil {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 15px;
}
.kk-fil-marque {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.16);
}
.kk-fil-sep { opacity: 0.45; }
/* Derniere miette : la page courante, sans lien, en menthe. */
.kk-fil-courant { color: #7de3c8; }

.kk-nav-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Nav de site dans le bandeau. Selecteurs prefixes .kk-bandeau : la regle
   .kk-bandeau a { color:#fff } plus haut a la meme specificite, et il faut la
   battre pour la pastille blanche. */
.kk-bnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kk-bandeau .kk-bnav a {
  font-size: 14px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  color: rgba(255, 255, 255, 0.85); transition: background 0.18s, color 0.18s;
}
.kk-bandeau .kk-bnav a:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.kk-bandeau .kk-bnav .kk-bnav-cta {
  background: #fff; color: #0b7285; padding: 9px 18px; margin-left: 6px;
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700;
}
.kk-bandeau .kk-bnav .kk-bnav-cta:hover { background: #dff0f3; color: #07505d; }

/* Pagination en pilule : les deux ronds et le rang partagent un meme fond,
   au lieu d'etre trois pastilles independantes. */
.kk-pagination {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px; padding: 4px;
}
.kk-pag, .kk-pag-inerte {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  font-size: 16px; font-weight: 700; line-height: 1; transition: background 0.18s;
}
.kk-bandeau .kk-pag:hover { background: rgba(255, 255, 255, 0.2); }
/* Derniere page : la fleche › reste visible mais sans cible ni contraste. */
.kk-pag-inerte { color: rgba(255, 255, 255, 0.35); }
.kk-pag-rang {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.9); padding: 0 2px;
}

.kk-bandeau-titre {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px; align-items: end; padding: 36px 32px 0;
}
/* Kicker : carre d'icone du livrable + « Phase 0X · Nom · livrable n ». */
.kk-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kk-kicker-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
}
.kk-kicker-txt {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.kk-bandeau h1 {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(38px, 5vw, 64px); letter-spacing: -0.035em; line-height: 1;
  margin: 0; color: #fff;
}
.kk-barre {
  width: 140px; height: 10px; border-radius: 999px;
  background: #7de3c8; margin: 22px 0;
}
.kk-chapo {
  font-size: 18px; line-height: 1.5; max-width: 560px;
  color: rgba(255, 255, 255, 0.88); text-wrap: pretty;
}

/* Carte « Ce que ca demontre », colonne droite du bloc titre. Fond herite
   de .kk-verre. */
.kk-demo { border-radius: 18px; padding: 18px 20px; backdrop-filter: blur(8px); }
.kk-demo-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #7de3c8; margin-bottom: 8px;
}
.kk-demo-texte { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }

/* Colonne droite quand la carte demontre coexiste avec un autre encart
   (chiffres de sprint, encart de CA, legende de statuts) : sans elle, les deux
   deviendraient deux enfants de plus de la grille .kk-bandeau-titre. */
.kk-slot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

/* Verre teinte : le seul habillage des elements poses sur l'aplat teal. */
.kk-verre {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Encarts du slot droit, selon la page : quatre chiffres de sprint
   (scrum-kanban), un encart de CA (tableau-de-bord), une legende de statuts
   (user-story-mapping). */
.kk-chiffres { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.kk-chiffre { border-radius: 12px; padding: 10px 16px; flex: 1 1 132px; }
.kk-chiffre-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin-bottom: 3px;
}
.kk-chiffre-valeur {
  font-family: 'Schibsted Grotesk', sans-serif; font-size: 17px; font-weight: 800;
  color: #fff;
}
.kk-encart {
  display: flex; align-items: center; gap: 14px;
  border-radius: 14px; padding: 12px 18px;
}
.kk-legende { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Gabarit des onze livrables : ce qui se repete d'une page a l'autre sous le
   bandeau. Le reste — schemas, tableaux, kanban, graphiques — est propre a
   chaque page et reste en ligne.
--------------------------------------------------------------------------- */

/* Premier bloc de chaque page, remonte sur le bandeau. */
.kk-phare { position: relative; z-index: 3; margin-top: -56px; }

/* Titre de section : carre teal a icone blanche + libelle mono teal. */
.kk-oeil { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.kk-oeil-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px; background: #0b7285;
}
.kk-oeil-txt {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #0b7285;
}

/* Carte blanche standard et ses composants. */
.kk-bloc {
  background: #fff; border-radius: 22px; padding: 24px 26px;
  box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.5);
}
.kk-bloc-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.kk-bloc-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 14px; background: #e6f4f5;
}
.kk-bloc-num {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8a969a;
}
.kk-bloc-titre {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; color: #16282d;
}
.kk-bloc-texte { font-size: 14.5px; line-height: 1.6; color: #5a6a6e; }
/* Sous-element pose dans une carte blanche. */
.kk-tuile { background: #f2f6f6; border-radius: 14px; padding: 14px 16px; }
.kk-etiquette {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  color: #0b7285; background: #e6f4f5; padding: 5px 11px; border-radius: 999px;
}
/* Rouge d'alerte : frustrations, points bloques, variations negatives. */
.kk-alerte { color: #c2412d; background: #fdeceb; }

/* Navigation bas de page : precedent en blanc, suivant en encre. */
.kk-nav-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.kk-nav-bas a {
  display: flex; align-items: center; gap: 16px;
  border-radius: 20px; padding: 20px 24px; text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.kk-nav-bas a:hover { transform: translateY(-3px); }
.kk-nav-prec {
  background: #fff; color: #16282d;
  box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.5);
}
.kk-nav-prec:hover { box-shadow: 0 30px 60px -30px rgba(13, 91, 107, 0.6); }
.kk-nav-suiv {
  background: #16282d; color: #fff; justify-content: flex-end; text-align: right;
  box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.7);
}
.kk-nav-suiv:hover { box-shadow: 0 30px 60px -30px rgba(13, 91, 107, 0.8); }
.kk-nav-fleche {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  font-size: 18px; font-weight: 700; line-height: 1;
  background: #e6f4f5; color: #0b7285;
}
.kk-nav-suiv .kk-nav-fleche { background: #0b7285; color: #fff; }
.kk-nav-lib { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kk-nav-sur {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8a969a;
}
.kk-nav-suiv .kk-nav-sur { color: #7de3c8; }
.kk-nav-titre {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 16px;
}

/* Pied de page des onze livrables. */
.kk-pied {
  margin-top: 34px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  color: #8fa0a4;
}

@media (max-width: 980px) {
  /* Titre et carte « ce que ca demontre » cote a cote separes par 48px : la
     largeur ne le permet plus. La carte repasse sous le chapo. */
  .kk-bandeau-titre { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .kk-chapo { max-width: none; }
}

@media (max-width: 820px) {
  /* Le padding lateral tombe a 20px, mais la marge negative reste calee sur
     les 32px de .u320 : c'est elle qui donne le plein ecran, pas le padding. */
  .kk-bandeau { padding: 0 0 72px; }
  .kk-bandeau-nav { padding: 18px 20px; }
  .kk-bandeau-titre { padding: 28px 20px 0; }
  .kk-bandeau h1 { font-size: clamp(30px, 8vw, 40px); }
  .kk-barre { margin: 18px 0; }
  .kk-chapo { font-size: 16px; }

  /* La nav de site disparait sous 820px, comme dans le handoff : la rangee
     porte deja fil d'Ariane et pagination, trois liens de plus la font passer
     a trois lignes. Le retour au CV reste assure par le fil d'Ariane, dont
     le logo « Kakemphaton » pointe sur index.html. */
  .kk-bnav { display: none; }

  .kk-nav-bas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Studio Decision : ce que les neuf briques ajoutent au gabarit ci-dessus

   Les neuf pages reprennent tel quel le bandeau, les cartes blanches et la
   navigation de bas de page des onze livrables. Ne vit ici que ce qui leur est
   propre : la rangee de chips sous le chapo, le cadre navigateur qui presente
   la capture du produit, la grille « comment ca marche », le bandeau de points
   cles et les tuiles « les autres ecrans ».

   Depuis la refonte ces pages ne dependent plus de site.css ni de la charte
   creme : le chrome du site est teal, le creme ne subsiste que dans les
   captures du produit et dans le bouton « Ouvrir l'application » du hub.
--------------------------------------------------------------------------- */

/* Le bandeau descend 32px plus bas que celui des livrables : la capture qui le
   chevauche remonte de 88px au lieu de 56, il lui faut d'autant plus d'aplat. */
.kk-bandeau--sd { padding-bottom: 120px; }
.kk-phare--sd   { margin-top: -88px; }

/* Cinq etiquettes techniques sous le chapo. */
.sd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.sd-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Cadre navigateur. Les captures montrent un logiciel : la barre a trois points
   le dit avant meme qu'on lise la legende. Le hub s'en sert aussi pour son
   hero, c'est la seule regle que les dix pages partagent vraiment. */
.sd-cadre {
  background: #fff; border-radius: 22px; padding: 12px;
  box-shadow: 0 40px 80px -40px rgba(13, 91, 107, 0.8);
}
.sd-cadre-points { display: flex; gap: 6px; padding: 2px 6px 10px; }
.sd-cadre-points i { width: 9px; height: 9px; border-radius: 50%; background: #e6eeef; }
.sd-cadre-points i:last-child { background: #7de3c8; }
.sd-cadre img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* « Comment ca marche » : l'intro tient la colonne gauche, les quatre etapes
   se rangent en 2x2 a droite. */
.sd-marche {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 40px; align-items: start; padding-top: 64px;
}
.sd-marche-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sd-h2 {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.035em; line-height: 1;
  margin: 0 0 16px;
}
.sd-h2 span { color: #0b7285; }
.sd-lead { font-size: 15.5px; line-height: 1.6; color: #5a6a6e; margin: 0; text-wrap: pretty; }
.sd-etape-titre {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em; margin: 0 0 8px;
}
.sd-etape-texte { font-size: 13.5px; line-height: 1.55; color: #5a6a6e; margin: 0; }

/* Points cles : le seul aplat encre de la page, badge menthe a gauche. */
.sd-points {
  position: relative; overflow: hidden; margin-top: 56px;
  background: #16282d; color: #fff; border-radius: 26px; padding: 32px 36px;
  box-shadow: 0 24px 48px -28px rgba(13, 91, 107, 0.7);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center;
}
.sd-points::before {
  content: ""; position: absolute; right: -70px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: #0b7285; opacity: 0.35; pointer-events: none;
}
.sd-points-badge {
  position: relative; align-self: start; justify-self: start;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #16282d; background: #7de3c8; padding: 6px 12px; border-radius: 999px;
}
.sd-points-liste {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px; margin: 0; padding: 0; list-style: none;
  font-size: 15px; font-weight: 600;
}
.sd-points-liste li { display: flex; align-items: center; gap: 12px; }
.sd-coche {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(125, 227, 200, 0.18); color: #7de3c8;
  font-size: 12px; font-weight: 700;
}

/* La brique suivante passe en teal plutot qu'en encre : le bandeau de points
   cles juste au-dessus est deja un aplat sombre, deux se suivraient. */
.kk-nav-suiv--sd { background: #0b7285; }
.kk-nav-suiv--sd .kk-nav-fleche { background: #7de3c8; color: #16282d; }

/* Les autres ecrans : neuf tuiles compactes, vignette a gauche et titre. */
.sd-ecrans { padding-top: 64px; }
.sd-autres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sd-tuile {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 16px; padding: 10px;
  color: #16282d; text-decoration: none;
  box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.5); transition: transform 0.3s;
}
.sd-tuile:hover { transform: translateY(-3px); color: #16282d; }
.sd-tuile img {
  width: 96px; height: 56px; flex: 0 0 auto; display: block;
  object-fit: cover; object-position: top; border-radius: 10px;
}
.sd-tuile-titre {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 14px;
}

@media (max-width: 980px) {
  /* L'intro et les quatre etapes cessent d'etre cote a cote. */
  .sd-marche { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sd-autres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  /* Doit venir apres .kk-bandeau { padding: 0 0 72px } de la regle 820px
     precedente : a specificite egale, c'est l'ordre du fichier qui tranche. */
  .kk-bandeau--sd { padding-bottom: 104px; }
  .sd-marche { padding-top: 48px; }
  .sd-points { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 24px; }
  .sd-points-liste { grid-template-columns: minmax(0, 1fr); }
  .sd-ecrans { padding-top: 48px; }
}

@media (max-width: 620px) {
  .sd-marche-cartes { grid-template-columns: minmax(0, 1fr); }
  .sd-autres { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Studio Decision : le hub studio-decision-etude-de-cas.html

   Il ouvre les neuf briques et sert de vitrine au produit. Il reprend le
   bandeau teal, le cadre navigateur, les eyebrows .kk-oeil et les cartes
   blanches des briques ; ne vit ici que ce qui n'apparait que sur cette page :
   le hero a deux colonnes, les quatre cartes KPI, le parcours en trois temps,
   les quatre articles « ce qui fait la difference », les neuf cartes-vignettes
   et le panneau d'appel a l'action.

   Le prefixe est .sd-hub- pour que rien n'entre en collision avec les regles
   .sd- des briques, qui n'ont pas le meme rythme vertical.
--------------------------------------------------------------------------- */

/* Hero. Le bandeau des briques descend de 120px sous le titre pour laisser la
   capture le chevaucher ; ici la capture est DANS le hero, a droite, et c'est
   la rangee de cadrage qui remonte de 72px — d'ou un aplat plus haut encore. */
.kk-bandeau--hub { padding: 0 0 140px; }
.kk-bandeau--hub::before {
  top: -120px; right: -100px; width: 560px; height: 560px;
}
.kk-bandeau--hub::after { bottom: -200px; left: 10%; width: 700px; height: 700px; }

.sd-hub-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center; padding: 56px 32px 0;
}
/* Le hub est la seule page dont le titre occupe toute une colonne : il peut
   monter beaucoup plus haut que le clamp des briques. */
.kk-bandeau--hub h1 {
  font-size: clamp(52px, 6.5vw, 92px); line-height: 0.96; letter-spacing: -0.04em;
}
.kk-bandeau--hub .kk-barre { width: 200px; height: 12px; margin: 26px 0; }
.kk-bandeau--hub .kk-chapo { font-size: 20px; line-height: 1.55; margin-bottom: 32px; }
.kk-bandeau--hub .sd-chips { margin-top: 28px; }

/* Pilule de statut, avec le point menthe qui bat. */
.sd-hub-statut {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
}
.sd-hub-statut i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: #7de3c8; animation: sd-pulse 2.4s ease-in-out infinite;
}
@keyframes sd-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.sd-hub-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sd-hub-actions a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 16px;
  border-radius: 14px; transition: background 0.2s, transform 0.2s;
}
/* Le terracotta du produit : avec les captures, le seul reste de la charte
   « Creme » sur ces dix pages. */
.sd-hub-app { background: #a55a37; color: #fff; padding: 16px 28px; }
.sd-hub-app:hover { background: #7a3d22; transform: translateY(-2px); }
.sd-hub-briques-lien {
  border: 2px solid rgba(255, 255, 255, 0.6); color: #fff; padding: 14px 26px;
}
.sd-hub-briques-lien:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }

/* Colonne droite : la capture d'accueil, legerement inclinee, et son badge. */
.sd-hub-visuel { position: relative; }
.sd-cadre--hub { transform: rotate(-1.5deg); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.6); }
.sd-hub-badge {
  position: absolute; left: -28px; bottom: -30px;
  display: flex; align-items: center; gap: 14px;
  background: #16282d; color: #fff; border-radius: 18px; padding: 16px 20px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.sd-hub-badge-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(125, 227, 200, 0.15); border: 1px solid rgba(125, 227, 200, 0.35);
}
.sd-hub-badge-sur {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #7de3c8;
}
.sd-hub-badge-txt {
  display: block; margin-top: 3px;
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 15px;
}

/* Cadrage : les trois cartes chevauchent l'aplat, comme la capture des briques. */
.sd-hub-cadrage {
  position: relative; z-index: 3; margin-top: -72px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.sd-hub-carte {
  background: #fff; border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 24px 48px -28px rgba(13, 91, 107, 0.4);
}
.sd-hub-carte--encre {
  background: #16282d; color: #fff;
  box-shadow: 0 24px 48px -28px rgba(13, 91, 107, 0.5);
}
.sd-hub-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sd-hub-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 11px; background: #e6f4f5;
}
.sd-hub-carte--encre .sd-hub-ico {
  background: rgba(125, 227, 200, 0.15); border: 1px solid rgba(125, 227, 200, 0.35);
}
.sd-hub-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #0b7285; margin: 0;
}
.sd-hub-carte--encre .sd-hub-label { color: #7de3c8; }
.sd-hub-carte p { font-size: 14.5px; line-height: 1.6; color: #5a6a6e; margin: 0; }
.sd-hub-carte--encre p { color: rgba(255, 255, 255, 0.78); }

/* En chiffres : quatre KPI, le dernier sur fond teal clair. */
.sd-hub-chiffres {
  padding-top: 56px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.sd-hub-kpi {
  background: #fff; border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.5);
}
.sd-hub-kpi--clair { background: #e6f4f5; }
.sd-hub-kpi-valeur {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 40px;
  letter-spacing: -0.04em; line-height: 1; color: #0b7285; margin: 0;
}
.sd-hub-kpi-valeur span { font-size: 0.5em; }
.sd-hub-kpi-libelle { font-size: 13.5px; line-height: 1.45; color: #5a6a6e; margin: 10px 0 0; }
.sd-hub-kpi--clair .sd-hub-kpi-libelle { color: #16282d; }

/* Rythme vertical commun aux sections qui suivent. */
.sd-hub-section { padding-top: 80px; }
.sd-hub-section--court { padding-top: 72px; }
.sd-h2--large { margin-bottom: 36px; }
.sd-h2--xlarge { margin-bottom: 40px; }

/* En trois temps : deux cartes blanches, une encre, separees par des fleches
   pointillees qui defilent. */
.sd-hub-temps {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px; align-items: stretch;
}
.sd-hub-etape {
  background: #fff; border-radius: 22px; padding: 26px 28px;
  box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.5);
}
.sd-hub-etape--encre {
  background: #16282d; color: #fff;
  box-shadow: 0 24px 48px -28px rgba(13, 91, 107, 0.7);
}
.sd-hub-etape--encre .kk-bloc-ico {
  background: rgba(125, 227, 200, 0.15); border: 1px solid rgba(125, 227, 200, 0.35);
}
.sd-hub-etape--encre .kk-bloc-num { color: #7de3c8; }
.sd-hub-etape h3 {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.sd-hub-etape p { font-size: 14.5px; line-height: 1.55; color: #5a6a6e; margin: 0; }
.sd-hub-etape--encre p { color: rgba(255, 255, 255, 0.78); }
.sd-hub-fleche { display: flex; align-items: center; }
.sd-hub-fleche path:first-child { animation: sd-flow 1.2s linear infinite; }
@keyframes sd-flow { to { stroke-dashoffset: -24; } }

/* Ce qui fait la difference : quatre articles pleine largeur, texte et capture
   alternes. La capture deborde vers le bord du panneau plutot que d'y flotter :
   c'est ce qui donne au bloc sa profondeur. */
.sd-hub-atouts { display: flex; flex-direction: column; gap: 20px; }
.sd-hub-atout {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: #fff; border-radius: 26px; overflow: hidden;
  box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.5);
}
.sd-hub-atout--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.sd-hub-atout--encre {
  background: #16282d; color: #fff;
  box-shadow: 0 24px 48px -28px rgba(13, 91, 107, 0.7);
}
.sd-hub-atout-txt {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 36px 40px;
}
.sd-hub-atout-txt > .kk-etiquette { align-self: flex-start; }
/* Sur la carte encre, l'etiquette teal sur teal clair disparaitrait. */
.sd-hub-pill-menthe { background: #7de3c8; color: #16282d; }
.sd-hub-atout h3 {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 26px;
  letter-spacing: -0.025em; line-height: 1.15; margin: 0; text-wrap: pretty;
}
.sd-hub-atout p { font-size: 15px; line-height: 1.6; color: #5a6a6e; margin: 0; }
.sd-hub-atout--encre p { color: rgba(255, 255, 255, 0.75); }
.sd-hub-liste {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 0; list-style: none; font-size: 14px; color: #16282d;
}
.sd-hub-atout--encre .sd-hub-liste { color: rgba(255, 255, 255, 0.9); }
.sd-hub-liste li { display: flex; gap: 10px; align-items: flex-start; }
.sd-hub-puce {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
  background: #e6f4f5; color: #0b7285; font-size: 11px; font-weight: 700;
}
.sd-hub-atout--encre .sd-hub-puce { background: rgba(125, 227, 200, 0.18); color: #7de3c8; }
.sd-hub-lien { align-self: flex-start; font-weight: 700; font-size: 14px; text-decoration: none; }
.sd-hub-atout--encre .sd-hub-lien { color: #7de3c8; }
.sd-hub-atout--encre .sd-hub-lien:hover { color: #fff; }
/* Cote capture : l'aplat degrade change de sens selon la colonne occupee. */
.sd-hub-atout-img {
  display: flex; align-items: center;
  background: linear-gradient(135deg, #0d5b6b, #0f8a9e); padding: 28px 0 28px 28px;
}
/* <picture> est en ligne par defaut : blockifie comme element flex, il tirerait
   sa largeur de l'intrinseque du fichier (960px) au lieu de la colonne. */
.sd-hub-atout-img picture { display: block; width: 100%; min-width: 0; }
.sd-hub-atout-img img {
  display: block; width: 100%; height: auto;
  border-radius: 14px 0 0 14px; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
}
.sd-hub-atout-img--gauche {
  background: linear-gradient(225deg, #0d5b6b, #0f8a9e); padding: 28px 28px 28px 0;
}
.sd-hub-atout--encre .sd-hub-atout-img--gauche {
  background: linear-gradient(225deg, #0b7285, #0f8a9e);
}
.sd-hub-atout-img--gauche img {
  border-radius: 0 14px 14px 0; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.3);
}

/* Sous le capot : le titre tient la colonne etroite, les trois cartes la large.
   Meme repartition que .sd-marche sur les briques. */
.sd-hub-capot {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 40px; align-items: start;
}
.sd-hub-capot-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sd-hub-capot-cartes .kk-bloc-ico { margin-bottom: 16px; }
.sd-hub-capot-cartes h3 {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em; margin: 0 0 8px;
}

/* Explorer en detail : les neuf briques en cartes-vignettes numerotees. */
.sd-hub-briques { position: relative; padding-top: 80px; }
.sd-hub-filigrane {
  position: absolute; top: 60px; right: 0; pointer-events: none; user-select: none;
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(120px, 18vw, 240px); letter-spacing: -0.08em; line-height: 1;
  color: rgba(11, 114, 133, 0.06);
}
.sd-hub-intro {
  font-size: 16px; line-height: 1.6; color: #5a6a6e;
  max-width: 640px; margin: 0 0 40px; text-wrap: pretty;
}
/* Le filigrane est positionne, l'eyebrow et le titre ne le sont pas : sans
   cela il passerait par-dessus eux des que la fenetre se resserre. */
.sd-hub-briques .kk-oeil, .sd-hub-briques .sd-h2, .sd-hub-intro {
  position: relative; z-index: 1;
}
.sd-hub-grille {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.sd-hub-tuile {
  display: flex; flex-direction: column;
  background: #fff; color: #16282d; border-radius: 20px; overflow: hidden;
  text-decoration: none; box-shadow: 0 16px 40px -30px rgba(13, 91, 107, 0.5);
  transition: transform 0.3s, box-shadow 0.3s;
}
.sd-hub-tuile:hover {
  transform: translateY(-5px); color: #16282d;
  box-shadow: 0 30px 60px -30px rgba(13, 91, 107, 0.6);
}
.sd-hub-tuile--encre { background: #16282d; color: #fff; }
.sd-hub-tuile--encre:hover { color: #fff; box-shadow: 0 30px 60px -30px rgba(13, 91, 107, 0.8); }
.sd-hub-tuile-img {
  position: relative;
  background: linear-gradient(135deg, #0d5b6b, #0f8a9e); padding: 18px 18px 0;
}
.sd-hub-tuile--encre .sd-hub-tuile-img { background: linear-gradient(135deg, #0b7285, #0f8a9e); }
.sd-hub-tuile-img img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 8;
  object-fit: cover; object-position: top;
  border-radius: 10px 10px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}
.sd-hub-tuile-num {
  position: absolute; top: 10px; left: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: #16282d; background: #7de3c8; padding: 4px 9px; border-radius: 999px;
}
.sd-hub-tuile-corps {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
  padding: 16px 18px 18px;
}
.sd-hub-tuile-cat {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8a969a; margin: 0;
}
.sd-hub-tuile--encre .sd-hub-tuile-cat { color: #7de3c8; }
.sd-hub-tuile-titre {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; margin: 0;
}
.sd-hub-tuile-desc { font-size: 13.5px; line-height: 1.5; color: #5a6a6e; margin: 0; }
.sd-hub-tuile--encre .sd-hub-tuile-desc { color: rgba(255, 255, 255, 0.72); }
/* Pousse le « voir le detail » en bas, quelle que soit la hauteur du texte. */
.sd-hub-tuile-lien {
  margin: auto 0 0; padding-top: 8px;
  color: #0b7285; font-weight: 700; font-size: 13px;
}
.sd-hub-tuile--encre .sd-hub-tuile-lien { color: #7de3c8; }

/* Appel a l'action. */
.sd-hub-cta {
  position: relative; overflow: hidden; margin-top: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  background: linear-gradient(135deg, #0b7285, #0f8a9e); color: #fff;
  border-radius: 28px; padding: 44px 48px;
  box-shadow: 0 40px 80px -40px rgba(11, 114, 133, 0.8);
}
.sd-hub-cta::before, .sd-hub-cta::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.sd-hub-cta::before {
  right: -80px; top: -80px; width: 320px; height: 320px;
  background: #7de3c8; opacity: 0.18;
}
.sd-hub-cta::after {
  right: 160px; bottom: -140px; width: 280px; height: 280px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.sd-hub-cta > * { position: relative; z-index: 2; }
.sd-hub-cta-sur {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7de3c8; margin: 0 0 12px;
}
.sd-hub-cta h2 {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.1;
  max-width: 620px; margin: 0 0 12px;
}
.sd-hub-cta p {
  font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.85);
  max-width: 560px; margin: 0;
}
.sd-hub-cta-actions { display: flex; flex-direction: column; gap: 10px; }
.sd-hub-cta-actions a {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700;
  border-radius: 14px; text-decoration: none; text-align: center; white-space: nowrap;
  color: #fff; transition: background 0.2s, transform 0.2s;
}
.sd-hub-cta-encre { background: #16282d; font-size: 16px; padding: 16px 28px; }
.sd-hub-cta-encre:hover { background: #0a1e22; color: #fff; transform: translateY(-2px); }
.sd-hub-cta-contour {
  border: 2px solid rgba(255, 255, 255, 0.5); font-size: 15px; padding: 13px 26px;
}
.sd-hub-cta-contour:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

@media (max-width: 980px) {
  /* Le hero passe en pile : la capture sous le titre, et le badge revient dans
     le flux, sinon il sortirait par la gauche de l'ecran. */
  .sd-hub-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sd-hub-badge { position: static; margin-top: 20px; }
  .sd-cadre--hub { transform: none; }

  .sd-hub-cadrage { grid-template-columns: minmax(0, 1fr); }
  .sd-hub-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Les fleches ne relient plus rien une fois les cartes empilees. */
  .sd-hub-temps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sd-hub-fleche { display: none; }
  .sd-hub-atout, .sd-hub-atout--rev { grid-template-columns: minmax(0, 1fr); }
  /* La capture repasse au-dessus du texte, quel que soit son ordre en source. */
  .sd-hub-atout-img--gauche { order: -1; }
  .sd-hub-atout-img, .sd-hub-atout-img--gauche { padding: 24px 24px 0; }
  .sd-hub-atout-img img, .sd-hub-atout-img--gauche img {
    border-radius: 12px 12px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  }
  .sd-hub-capot { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sd-hub-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-hub-cta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  /* Comme .kk-bandeau--sd, doit venir apres la regle 820px des livrables. */
  .kk-bandeau--hub { padding: 0 0 104px; }
  .sd-hub-hero { padding: 28px 20px 0; }
  .kk-bandeau--hub h1 { font-size: clamp(34px, 9vw, 48px); }
  .kk-bandeau--hub .kk-barre { width: 140px; height: 10px; margin: 20px 0; }
  .kk-bandeau--hub .kk-chapo { font-size: 17px; }
  .sd-hub-cadrage { margin-top: -56px; }
  .sd-hub-section, .sd-hub-briques { padding-top: 56px; }
  .sd-hub-section--court, .sd-hub-chiffres { padding-top: 48px; }
  .sd-hub-atout-txt { padding: 26px 24px; }
  .sd-hub-capot-cartes { grid-template-columns: minmax(0, 1fr); }
  .sd-hub-cta { padding: 32px 26px; }
}

@media (max-width: 620px) {
  .sd-hub-chiffres { grid-template-columns: minmax(0, 1fr); }
  .sd-hub-grille { grid-template-columns: minmax(0, 1fr); }
  .sd-hub-filigrane { display: none; }
}