/* ===== LOBA TERRAIN SYSTEM · v1 — une grammaire, cinq dialectes ===== */
:root {
  --ink: #050b1f; --ink-2: #081633; --navy: #022d69; --navy-2: #0f458c; --blue: #1b54a5;
  --gold: #f7b406; --gold-hi: #ffe08a; --gold-lo: #c98a00; --gold-ink: #2a1e00;
  --cream: #f6f4ef; --paper: #fff; --peri: #918fd1;
  --font-d: 'Instrument Serif', Georgia, serif; --font-l: 'Montserrat', system-ui, sans-serif; --font-b: 'Source Sans 3', system-ui, sans-serif;
  --wrap: 1320px; --px: clamp(20px, 4vw, 56px); --sec: clamp(84px, 11vw, 160px);
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.7, 0, .2, 1);
  --signal: #f7b406; --signal-hi: #ffe08a; --signal-ink: #2a1e00;
}
.t-p1 { --signal: #fec101; --signal-hi: #ffe08a; --signal-ink: #2a1e00; }
.t-p2 { --signal: #0071c2; --signal-hi: #6cc4ff; --signal-ink: #fff; }
.t-p3 { --signal: #e12b1d; --signal-hi: #ff8d84; --signal-ink: #fff; }
.t-p4 { --signal: #5b7a1e; --signal-hi: #b9d97a; --signal-ink: #fff; }
.t-p5 { --signal: #6a68b8; --signal-hi: #b5b3e6; --signal-ink: #fff; }
.logo-crop { background: url(assets/logo-couleur.jpg) no-repeat; background-size: 137.6% auto; background-position: 50.8% 53.4%; aspect-ratio: 785 / 475; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050b1f; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #fff; }
button { font-family: inherit; }
.ls { font-family: var(--font-b); overflow-x: clip; background: var(--bg, var(--ink)); color: var(--fg, #e7ecf6); }
.ls * { box-sizing: border-box; }
/* surfaces : chaque surface redéfinit les variables, les enfants s'adaptent */
.s-ink, .s-ink2, .s-navy, .s-cream, .s-paper, .s-signal { position: relative; background: var(--bg); color: var(--fg); }
.s-ink { --bg: var(--ink); --fg: #c9d6ec; --head: #fff; --mute: #9fb2d4; --line: rgba(255,255,255,.16); --card: rgba(255,255,255,.07); --accent: var(--gold-hi); --on: #fff; }
.s-ink2 { --bg: var(--ink-2); --fg: #c9d6ec; --head: #fff; --mute: #9fb2d4; --line: rgba(255,255,255,.16); --card: rgba(255,255,255,.07); --accent: var(--gold-hi); --on: #fff; }
.s-navy { --bg: var(--navy); --fg: #d6e2f3; --head: #fff; --mute: #a9bddb; --line: rgba(255,255,255,.2); --card: rgba(255,255,255,.08); --accent: var(--gold-hi); --on: #fff; }
.s-cream { --bg: var(--cream); --fg: #2c3645; --head: var(--navy); --mute: #4a5668; --line: rgba(2,45,105,.18); --card: #fff; --accent: var(--gold-lo); --on: var(--navy); }
.s-paper { --bg: #fff; --fg: #2c3645; --head: var(--navy); --mute: #4a5668; --line: rgba(2,45,105,.18); --card: var(--cream); --accent: var(--gold-lo); --on: var(--navy); }
.s-signal { --bg: var(--signal); --fg: var(--signal-ink); --head: var(--signal-ink); --mute: var(--signal-ink); --line: rgba(255,255,255,.35); --card: rgba(255,255,255,.14); --accent: var(--signal-ink); --on: var(--signal-ink); }
.s-gold { position: relative; background: linear-gradient(160deg, #ffe08a, #f7b406 45%, #d49400); color: #1a1200; --head: #1a1200; --fg: #1a1200; --mute: #3a2a00; --line: rgba(26,18,0,.3); --card: rgba(255,255,255,.35); --accent: #1a1200; --on: #1a1200; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--px); position: relative; }
.sec { padding-top: var(--sec); padding-bottom: var(--sec); }
/* typographie : 3 familles, 6 rôles */
.t-d1, .t-d2, .t-d3 { font-family: var(--font-d); font-weight: 400; color: var(--head); margin: 0; text-wrap: balance; }
.t-d1 { font-size: clamp(60px, 10vw, 168px); line-height: .88; letter-spacing: -.035em; }
.t-d2 { font-size: clamp(46px, 6.4vw, 104px); line-height: .93; letter-spacing: -.03em; }
.t-d3 { font-size: clamp(32px, 3.8vw, 58px); line-height: 1.02; letter-spacing: -.02em; }
.t-d1 em, .t-d2 em, .t-d3 em { font-style: italic; color: var(--accent); }
.s-ink .t-d1 em, .s-ink .t-d2 em, .s-ink2 .t-d2 em, .s-navy .t-d2 em, .gold { background: linear-gradient(100deg, #ffe9a8 0%, #f7b406 35%, #c98a00 55%, #ffe9a8 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: sheen 7s linear infinite; }
.t-lede { font-family: var(--font-d); font-style: italic; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.14; color: var(--head); margin: 0; }
.t-body { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; color: var(--fg); margin: 0; }
.t-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-l); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--head); }
.t-eyebrow::before { content: ''; width: 44px; height: 2px; background: var(--gold); }
.t-label { font-family: var(--font-l); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.num { font-family: var(--font-d); line-height: .9; color: var(--accent); }
/* actions */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-l); font-weight: 800; font-size: 15px; padding: 18px 32px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .3s var(--ease), filter .3s, background .3s, box-shadow .3s; }
.btn:active { transform: translateY(1px); }
.btn-gold { background: linear-gradient(135deg, #ffe08a, #f7b406 60%, #d49400); color: var(--gold-ink); box-shadow: 0 20px 50px -14px rgba(247,180,6,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-gold:hover { color: var(--gold-ink); transform: translateY(-3px); filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--head); border: 1.5px solid var(--line); box-shadow: inset 0 0 0 1px transparent; font-weight: 700; }
.btn-ghost:hover { color: var(--head); background: var(--card); border-color: var(--head); }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 24px 50px -14px rgba(5,11,31,.7); }
.btn-ink:hover { background: var(--navy); color: #fff; transform: translateY(-3px); }
.chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-l); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; background: var(--gold-hi); color: #3a2a00; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; display: inline-block; }
.card { background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(0,0,0,.5); }
.lesson { border-left: 6px solid var(--gold); padding: 8px 0 8px clamp(20px, 3vw, 44px); }
.lesson > .t-label { color: var(--head); }
.lesson > p { font-family: var(--font-d); font-style: italic; font-size: clamp(36px, 5vw, 80px); line-height: 1.02; letter-spacing: -.02em; color: var(--head); margin: 12px 0 0; text-wrap: balance; }
/* ADN de formes : une silhouette signature par terrain */
.sh-planche { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }
.sh-bulle { border-radius: 50% 50% 50% 10% / 50% 50% 50% 10%; }
.sh-chevron { clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 50%, calc(100% - 48px) 100%, 0 100%, 48px 50%); }
.sh-chevron-1 { clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 50%, calc(100% - 48px) 100%, 0 100%); }
.sh-module { border-radius: 36px 36px 8px 36px; }
.sh-arche { border-radius: 999px 999px 18px 18px; }
.sh-blob { animation: morph 14s ease-in-out infinite; }
.sh-diag { clip-path: polygon(0 var(--cut, 90px), 100% 0, 100% calc(100% - var(--cut, 90px)), 0 100%); }
/* effets : activés par attribut data-fx, jamais par page */
[data-fx=reveal] { opacity: 0; transform: translateY(46px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
[data-fx=slide-l] { opacity: 0; transform: translateX(-80px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
[data-fx=slide-r] { opacity: 0; transform: translateX(80px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
[data-fx=pop] { opacity: 0; transform: scale(.6); transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
[data-fx=wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease-io) var(--d, 0s); }
[data-fx=grow] { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) var(--d, 0s); }
[data-fx].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
[data-fx=tilt] { transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .2s ease-out; will-change: transform; }
[data-fx=spot] { position: relative; overflow: hidden; }
[data-fx=spot]::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(185,217,122,.28)), transparent 65%); }
[data-fx=spot]:hover::before { opacity: 1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: rgba(2,45,105,.16); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c2, #f7b406 60%, #c98a00); border: 0; cursor: grab; box-shadow: 0 0 0 6px rgba(247,180,6,.25), 0 6px 16px rgba(2,45,105,.35); }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #f7b406; border: 0; cursor: grab; }
.progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; z-index: 100; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--signal-hi), var(--gold)); }
.ticker { overflow: hidden; white-space: nowrap; }
.ticker > div { display: inline-flex; animation: marquee 30s linear infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes morph { 0%,100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; } 33% { border-radius: 42% 58% 40% 60% / 56% 42% 58% 44%; } 66% { border-radius: 50% 50% 62% 38% / 40% 58% 42% 60%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes aurora { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.15); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(247,180,6,.55); } 50% { box-shadow: 0 0 0 14px rgba(247,180,6,0); } }
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ripple { from { transform: scale(.6); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }
.rise { animation: rise 1.2s var(--ease) both; }
@media (max-width: 960px) {
  .g2 { grid-template-columns: 1fr !important; }
  .g2 > * { grid-column: auto !important; }
  .g3 { grid-template-columns: 1fr !important; }
  .g4 { grid-template-columns: 1fr 1fr !important; }
  .hide-m { display: none !important; }
  .nav-links { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { [data-fx], .rise { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } }