/* Page IMPERO — hero, avantages, mécaniques, bientôt disponible */
.ip-gold { background:linear-gradient(180deg, #f6e6b4 0%, var(--gold) 46%, #8c6a2a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ip-label { color:var(--gold); }
.ip-h2 { margin:18px 0 0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(44px, 6.4vw, 96px); line-height:.94; letter-spacing:-.02em; }
.ip-h2 em { color:var(--verm); }

/* hero */
.ip-hero { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--nav-h) + 48px) var(--g) 40px; overflow:hidden; overflow:clip; isolation:isolate; }
.ip-hero-bg { position:absolute; inset:-8% 0 0; z-index:-3; }
.ip-hero-bg img { width:100%; height:100%; object-fit:cover; object-position:35% 50%; animation:ip-zoom 22s ease-in-out infinite alternate; }
@keyframes ip-zoom { from { transform:scale(1.04); } to { transform:scale(1.16); } }
.ip-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(17,16,22,.72) 0%, rgba(17,16,22,.15) 30%, rgba(17,16,22,.35) 55%, var(--ink) 97%), linear-gradient(90deg, rgba(17,16,22,.85) 0%, rgba(17,16,22,.2) 60%, rgba(17,16,22,0) 100%); }
.ip-dust { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55; background-image:radial-gradient(1.5px 1.5px at 12% 80%, #f6e6b4, transparent), radial-gradient(1px 1px at 28% 60%, #f6e6b4, transparent), radial-gradient(2px 2px at 44% 90%, var(--gold), transparent), radial-gradient(1px 1px at 63% 70%, #f6e6b4, transparent), radial-gradient(1.5px 1.5px at 78% 85%, var(--gold), transparent), radial-gradient(1px 1px at 91% 65%, #f6e6b4, transparent); background-size:100% 100%; animation:ip-dust 14s linear infinite; }
.ip-dust + .ip-dust { opacity:.35; background-position:37% 20%; animation-duration:22s; animation-delay:-7s; }
@keyframes ip-dust { from { transform:translateY(10%); opacity:0; } 15% { opacity:.6; } to { transform:translateY(-40%); opacity:0; } }
.ip-eyebrow { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; color:rgba(242,238,230,.75); }
.ip-eyebrow i { width:32px; height:1px; background:var(--gold); }
.ip-title { position:relative; margin:18px 0 0; font-family:"Cinzel",serif; font-weight:700; font-size:clamp(68px, 17vw, 270px); line-height:.86; letter-spacing:.06em; white-space:nowrap; filter:drop-shadow(0 18px 50px rgba(0,0,0,.55)); }
.ip-title span { display:inline-block; background:linear-gradient(180deg, #fbf0c9 0%, var(--gold) 48%, #7d5c22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; animation:ip-rise 1.3s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i) * 90ms) both; }
@keyframes ip-rise { from { opacity:0; transform:translateY(40%) scale(.94); filter:blur(10px); } to { opacity:1; transform:none; filter:none; } }
.ip-title::after { content:""; position:absolute; inset:-10% -5%; background:linear-gradient(100deg, transparent 38%, rgba(255,240,200,.85) 50%, transparent 62%); background-size:250% 100%; mix-blend-mode:color-dodge; pointer-events:none; animation:ip-sheen 5.5s ease-in-out 1.6s infinite; background-position:150% 0; }
@keyframes ip-sheen { 0% { background-position:150% 0; } 45%, 100% { background-position:-60% 0; } }
.ip-hero-grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:32px 64px; align-items:end; margin-top:clamp(20px, 3vh, 36px); }
.ip-tagline { margin:0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(30px, 3.6vw, 54px); line-height:1.02; }
.ip-tagline em { color:var(--verm); }
.ip-hero-side p { margin:0 0 26px; font-size:17px; line-height:1.65; color:#d7d2c8; max-width:520px; }
.ip-hero .btn-row, .ip-hero-grid > * { animation:ip-fade 1.1s cubic-bezier(.16,1,.3,1) 1s both; }
.ip-hero-side { animation-delay:1.15s !important; }
@keyframes ip-fade { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.ip-facts { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:clamp(28px, 5vh, 56px); border-top:1px solid rgba(216,178,90,.35); animation:ip-fade 1.1s cubic-bezier(.16,1,.3,1) 1.3s both; }
.ip-facts > div { padding:18px 20px 0 0; }
.ip-facts > div + div { padding-left:20px; border-left:1px solid var(--line); }
.ip-facts b { display:block; margin-top:8px; font-size:clamp(18px, 1.8vw, 24px); font-weight:600; color:var(--paper); letter-spacing:0; text-transform:none; font-family:"Inter Tight",sans-serif; }
.ip-live, .ip-facts b.ip-live { display:flex; align-items:center; gap:10px; }
.ip-live::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--verm); animation:pulse 2s infinite; }

/* section 2 : pourquoi */
.ip-why { background:var(--paper); color:var(--ink); padding:clamp(88px, 12vw, 160px) var(--g); position:relative; }
.ip-why .mono { color:#77736c; }
.ip-why .ip-label { color:#a07a2c; }
.ip-why-head { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:32px 80px; align-items:end; }
.ip-why-head p { margin:0; font-size:18px; line-height:1.65; color:#4a4744; max-width:520px; }
.ip-stats { display:grid; grid-template-columns:repeat(4, 1fr); margin:clamp(56px, 7vw, 96px) 0; border-top:1px solid rgba(17,16,22,.15); border-bottom:1px solid rgba(17,16,22,.15); }
.ip-stat { padding:34px 24px 30px 0; }
.ip-stat + .ip-stat { padding-left:24px; border-left:1px solid rgba(17,16,22,.15); }
.ip-stat strong { display:block; font-family:"Cinzel",serif; font-weight:700; font-size:clamp(52px, 6.4vw, 104px); line-height:1; letter-spacing:.02em; background:linear-gradient(180deg, #c89a3c 0%, #8c6a2a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ip-stat span { display:block; margin-top:12px; font-weight:600; font-size:15px; }
.ip-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.ip-card { position:relative; padding:34px 30px 32px; background:#fbf8f2; border:1px solid rgba(17,16,22,.1); border-radius:4px; overflow:hidden; transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.ip-card::before { content:""; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(216,178,90,.22), transparent 60%); opacity:0; transition:opacity .4s ease; pointer-events:none; }
.ip-card:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(17,16,22,.12); }
.ip-card:hover::before { opacity:1; }
.ip-card img { width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(17,16,22,.25)); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ip-card:hover img { transform:translateY(-4px) rotate(-4deg) scale(1.08); }
.ip-card h3 { margin:22px 0 10px; font-size:22px; font-weight:600; letter-spacing:-.01em; }
.ip-card p { margin:0; font-size:15.5px; line-height:1.65; color:#4a4744; }

/* section 3 : mécaniques */
.ip-mech { position:relative; padding:clamp(88px, 12vw, 160px) 0 clamp(64px, 8vw, 120px); background:radial-gradient(80% 50% at 50% 0%, #1d1a1f 0%, var(--ink) 70%); overflow:hidden; overflow:clip; }
.ip-mech > .ip-in { padding:0 var(--g); }
.ip-steps { position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:clamp(48px, 6vw, 80px); }
.ip-steps::before { content:""; position:absolute; left:0; right:0; top:44px; height:1px; background:linear-gradient(90deg, var(--gold), rgba(216,178,90,.15)); transform-origin:left; }
.ip-step { position:relative; padding-top:96px; }
.ip-step .num { position:absolute; top:0; left:0; display:grid; place-items:center; width:88px; height:88px; border:1px solid rgba(216,178,90,.5); border-radius:50%; background:var(--ink); color:var(--gold); font-family:"Cinzel",serif; font-weight:700; font-size:30px; box-shadow:0 0 30px rgba(216,178,90,.18); }
.ip-step h3 { margin:0 0 10px; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(30px, 2.8vw, 40px); }
.ip-step p { margin:0; font-size:15.5px; line-height:1.65; color:#b3afb6; max-width:360px; }
.ip-board { position:relative; margin:clamp(88px, 11vw, 150px) auto 0; padding:0 var(--g); perspective:1600px; }
.ip-board-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px; }
.ip-board-head h3 { margin:14px 0 0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(36px, 4.4vw, 64px); line-height:1; }
.ip-board-head h3 em { color:var(--gold); }
.ip-board-frame { position:relative; max-width:1240px; margin:0 auto; border:1px solid rgba(216,178,90,.45); border-radius:6px; overflow:hidden; box-shadow:0 60px 140px rgba(0,0,0,.6), 0 0 0 10px rgba(216,178,90,.06); transform-origin:50% 100%; }
.ip-board-frame img { display:block; width:100%; height:auto; }
.ip-board-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,16,22,0) 60%, rgba(17,16,22,.55) 100%); pointer-events:none; }
.ip-massalia { position:absolute; left:48%; top:45.5%; width:13%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; pointer-events:none; }
.ip-massalia::before, .ip-massalia::after { content:""; position:absolute; inset:0; border:2px solid var(--gold); border-radius:50%; animation:ip-ring 2.8s ease-out infinite; }
.ip-massalia::after { animation-delay:1.4s; }
@keyframes ip-ring { from { transform:scale(.6); opacity:1; } to { transform:scale(1.7); opacity:0; } }
.ip-massalia span { position:absolute; left:50%; top:-26px; transform:translateX(-50%); white-space:nowrap; padding:6px 10px; background:rgba(17,16,22,.85); border:1px solid rgba(216,178,90,.6); color:var(--gold); }
.ip-board-facts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:28px; color:rgba(242,238,230,.7); }
.ip-board-facts b { color:var(--gold); font-weight:500; }
.ip-mech-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; margin-top:clamp(88px, 11vw, 150px); background:rgba(216,178,90,.18); border:1px solid rgba(216,178,90,.18); }
.ip-mech-card { position:relative; padding:40px 34px 38px; background:var(--ink); overflow:hidden; transition:background .5s ease; }
.ip-mech-card::before { content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(216,178,90,.16), transparent 60%); opacity:0; transition:opacity .4s ease; pointer-events:none; }
.ip-mech-card:hover { background:#16141b; }
.ip-mech-card:hover::before { opacity:1; }
.ip-icons { display:flex; gap:6px; height:64px; align-items:flex-end; }
.ip-icons img { width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ip-mech-card:hover .ip-icons img { transform:translateY(-6px); }
.ip-mech-card:hover .ip-icons img:nth-child(2) { transition-delay:.06s; }
.ip-mech-card:hover .ip-icons img:nth-child(3) { transition-delay:.12s; }
.ip-mech-card .mono { display:block; margin-top:26px; color:var(--gold); }
.ip-mech-card h3 { margin:10px 0 12px; font-family:"Instrument Serif",serif; font-weight:400; font-size:34px; line-height:1; }
.ip-mech-card p { margin:0; font-size:15px; line-height:1.65; color:#b3afb6; }
.ip-factions { margin-top:clamp(88px, 11vw, 150px); }
.ip-factions-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:44px; }
.ip-faction { position:relative; padding:34px 26px 30px; text-align:center; border:1px solid rgba(216,178,90,.22); border-radius:4px; background:linear-gradient(180deg, rgba(216,178,90,.07), rgba(216,178,90,0) 60%); transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease; }
.ip-faction:hover { transform:translateY(-8px); border-color:rgba(216,178,90,.6); }
.ip-faction img { width:clamp(110px, 11vw, 150px); height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.7)); animation:ip-float 6s ease-in-out infinite; }
.ip-faction:nth-child(2) img { animation-delay:-1.5s; } .ip-faction:nth-child(3) img { animation-delay:-3s; } .ip-faction:nth-child(4) img { animation-delay:-4.5s; }
@keyframes ip-float { 50% { transform:translateY(-10px); } }
.ip-faction h4 { margin:18px 0 4px; font-family:"Cinzel",serif; font-weight:700; font-size:26px; letter-spacing:.08em; }
.ip-faction .mono { display:block; color:var(--ash); }
.ip-faction p { margin:14px 0 0; font-size:15px; line-height:1.6; color:#c9c5bd; }
.ip-wins { margin-top:clamp(88px, 11vw, 150px); }
.ip-wins-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin-top:44px; border-top:1px solid rgba(216,178,90,.35); }
.ip-win { position:relative; padding:40px 36px 10px 0; }
.ip-win + .ip-win { padding-left:36px; border-left:1px solid var(--line); }
.ip-win .num { font-family:"Cinzel",serif; font-weight:700; font-size:clamp(64px, 7vw, 110px); line-height:1; }
.ip-win h4 { margin:18px 0 8px; font-size:22px; font-weight:600; }
.ip-win p { margin:0; font-size:15.5px; line-height:1.6; color:#b3afb6; }
.ip-win img { position:absolute; right:0; top:34px; width:64px; opacity:.9; }
.ip-wins-note { margin:36px 0 0; color:var(--ash); }

/* section 4 : bientôt disponible */
.ip-soon { position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:center; padding:clamp(96px, 12vw, 160px) var(--g); overflow:hidden; overflow:clip; isolation:isolate; }
.ip-soon-bg { position:absolute; inset:0; z-index:-2; }
.ip-soon-bg img { width:100%; height:100%; object-fit:cover; object-position:30% 30%; transform:scaleX(-1); }
.ip-soon::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--ink) 0%, rgba(17,16,22,.92) 38%, rgba(17,16,22,.35) 72%, rgba(17,16,22,.15) 100%), linear-gradient(180deg, var(--ink) 0%, rgba(17,16,22,0) 18%, rgba(17,16,22,0) 80%, var(--ink) 100%); }
.ip-soon-in { max-width:640px; }
.ip-soon h2 { margin:22px 0 0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(64px, 9vw, 150px); line-height:.86; letter-spacing:-.02em; }
.ip-soon h2 em { color:var(--verm); }
.ip-soon p { margin:28px 0 0; font-size:17px; line-height:1.65; color:#d7d2c8; }
.ip-notify { margin-top:34px; display:flex; border-bottom:2px solid var(--gold); max-width:520px; }
.ip-notify input { flex:1; min-width:0; background:transparent; border:0; padding:16px 0; font:500 17px "Inter Tight",sans-serif; color:var(--paper); outline:none; }
.ip-notify input::placeholder { color:rgba(242,238,230,.45); }
.ip-notify button { display:flex; align-items:center; gap:10px; padding:0 4px; background:none; border:0; color:var(--gold); font:600 15px "Inter Tight",sans-serif; cursor:pointer; white-space:nowrap; }
.ip-notify-msg { margin:12px 0 0 !important; font-size:13px !important; font-weight:600; color:var(--paper) !important; min-height:1em; }
.ip-soon .link-row { margin-top:30px; }
.ip-platforms { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.ip-platforms span { padding:8px 12px; border:1px solid rgba(216,178,90,.35); border-radius:99px; color:var(--gold); }

/* apparitions au défilement (sans JavaScript, là où le navigateur sait le faire) */
@supports (animation-timeline: view()) {
  .ip-steps::before { animation:ip-draw linear both; animation-timeline:view(); animation-range:entry 20% cover 45%; }
  .ip-board-frame { animation:ip-tilt linear both; animation-timeline:view(); animation-range:entry 0% cover 45%; }
  .ip-hero-bg { animation:ip-parallax linear both; animation-timeline:scroll(root); animation-range:0 100vh; }
}
@keyframes ip-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes ip-tilt { from { transform:rotateX(42deg) scale(.84); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes ip-parallax { to { transform:translateY(18%); } }

/* ≤ 1100 px */
@media (max-width:1100px) {
  .ip-hero-grid { grid-template-columns:1fr; }
  .ip-cards, .ip-mech-grid { grid-template-columns:repeat(2, 1fr); }
  .ip-factions-grid { grid-template-columns:repeat(2, 1fr); }
  .ip-why-head { grid-template-columns:1fr; }
}
/* ≤ 820 px */
@media (max-width:820px) {
  .ip-hero { padding:calc(var(--nav-h) + 32px) var(--g) 32px; }
  .ip-hero-bg img { object-position:36% 50%; }
  .ip-hero::before { background:linear-gradient(180deg, rgba(17,16,22,.72) 0%, rgba(17,16,22,.35) 24%, rgba(17,16,22,.78) 50%, rgba(17,16,22,.9) 70%, var(--ink) 94%); }
  .ip-facts b { font-size:17px; }
  .ip-title { letter-spacing:.03em; }
  .ip-facts { grid-template-columns:repeat(2, 1fr); }
  .ip-facts > div:nth-child(3) { padding-left:0; border-left:0; }
  .ip-facts > div:nth-child(n+3) { margin-top:14px; border-top:1px solid var(--line); }
  .ip-stats { grid-template-columns:repeat(2, 1fr); }
  .ip-stat:nth-child(3) { padding-left:0; border-left:0; }
  .ip-stat:nth-child(n+3) { border-top:1px solid rgba(17,16,22,.15); }
  .ip-cards, .ip-mech-grid { grid-template-columns:1fr; }
  .ip-steps { grid-template-columns:1fr; gap:36px; }
  .ip-steps::before { left:44px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(180deg, var(--gold), rgba(216,178,90,.15)); transform-origin:top; }
  .ip-step { padding:0 0 0 116px; min-height:88px; }
  .ip-board-head { flex-direction:column; align-items:flex-start; }
  .ip-massalia span { display:none; }
  .ip-wins-grid { grid-template-columns:1fr; }
  .ip-win { padding:32px 80px 24px 0; }
  .ip-win + .ip-win { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .ip-soon { display:block; min-height:0; padding:0 var(--g) 88px; }
  .ip-soon::before { display:none; }
  .ip-soon-bg { position:relative; inset:auto; z-index:0; height:clamp(320px, 100vw, 560px); margin:0 calc(var(--g) * -1) -96px; }
  .ip-soon-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--ink) 0%, rgba(17,16,22,0) 22%, rgba(17,16,22,.15) 60%, var(--ink) 100%); }
  .ip-soon-bg img { object-position:30% 20%; }
  .ip-soon-in { position:relative; }
}
/* ≤ 480 px */
@media (max-width:480px) {
  .ip-factions-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .ip-faction { padding:24px 14px 22px; }
  .ip-faction h4 { font-size:20px; }
  .ip-faction p { font-size:14px; }
  .ip-card { padding:28px 24px; }
  .ip-mech-card { padding:32px 24px; }
  .ip-step { padding-left:100px; }
  .ip-step .num { width:76px; height:76px; font-size:26px; }
  .ip-steps::before { left:38px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .ip-board-frame, .ip-steps::before, .ip-hero-bg { animation:none !important; }
}