/* Mijoh Studio — v6 · page Studio */

html.no-js .line__in, html.no-js .word__in { will-change: auto; }

/* Contournement : le masque .line (base.css) coupe les accents des capitales (É, À, Ê) — on lui donne de l'air au-dessus */
.display .line { padding-top: .2em; margin-top: -.2em; }
/* DA sobre : le mot fort passe en italique (plus de dégradé coloré) */
.em { font-style: italic; font-weight: 820; }
.display .line__in.em { padding-top: .2em; margin-top: -.2em; padding-right: .04em; }

/* ---------- Héros ---------- */
.s-hero { padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px)); padding-bottom: clamp(24px, 3vw, 48px); overflow-x: clip; }
.s-hero__top {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding-bottom: 14px; border-bottom: 3px solid var(--ink); margin-bottom: clamp(18px, 2.4vw, 34px);
}
.s-hero__top .idx { grid-column: 1 / span 2; }
.s-hero__top .label:not(.s-hero__lang) { grid-column: 3 / span 6; }
.s-hero__lang { grid-column: 11 / -1; justify-self: end; }
.s-hero__title { margin-left: -.03em; }
.s-hero__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start; margin-top: clamp(28px, 3.4vw, 52px);
}
.s-hero__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 28px; padding-top: 6px; }
.s-hero__intro .lead { max-width: 30ch; }
.s-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.s-hero__reel { grid-column: 8 / -1; transform-origin: 70% 30%; margin-top: -24px; }
.reel-card {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-3); box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .35);
}
.reel-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-hero__cap { margin-top: 12px; }
/* Liens dans le texte courant : soulignés, pas seulement colorés */
.s-hero__cap a, .belief__p a, .nope__note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Manifeste ---------- */
.manifest { position: relative; }
.manifest__in {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px;
}
.manifest__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.manifest__head .idx { grid-column: 1 / span 2; }
.manifest__head .label { grid-column: 3 / span 3; }
.manifest__bar { grid-column: 6 / -1; height: 3px; background: var(--paper-3); border-radius: 3px; overflow: hidden; }
.manifest__bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left center; }
html.motion .manifest__bar i { transform: scaleX(0); }
.manifest__p {
  font-size: clamp(28px, 3.65vw, 56px); line-height: 1.08; font-weight: 560; letter-spacing: -.022em;
  max-width: 24em; text-wrap: pretty;
}
.manifest__p em { font-style: italic; font-weight: 620; }
.manifest__p .word--mask { padding: .06em 0 .1em; margin: -.06em 0 -.1em; }

/* ---------- Ce qu'on croit : pile de cartes ---------- */
.beliefs { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(60px, 8vw, 120px); overflow-x: clip; }
.stack { margin-top: clamp(40px, 5vw, 80px); display: flex; flex-direction: column; gap: 12vh; }
.belief { position: relative; }
.belief__in {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  height: min(780px, calc(100vh - var(--header-h) - 104px)); min-height: 520px;
  padding: clamp(24px, 3vw, 44px); border-radius: var(--r-lg); overflow: hidden;
  transform-origin: 50% 0%; box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .35);
}
.belief__in::after {
  content: ''; position: absolute; inset: 0; background: var(--ink); opacity: var(--shade, 0); pointer-events: none; border-radius: inherit;
}
.belief--ink .belief__in { background: var(--ink); color: var(--paper); }
.belief--paper .belief__in { background: var(--paper-3); color: var(--ink); }
.belief--ink3 .belief__in { background: var(--ink-3); color: var(--paper); }
.belief--paper2 .belief__in { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), 0 30px 60px -25px rgba(13, 13, 14, .35); }
.belief__text { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 0; }
.belief__num { display: flex; align-items: baseline; gap: 10px; font-weight: 880; font-stretch: 62%; font-size: clamp(56px, 6vw, 104px); line-height: .8; font-variant-numeric: tabular-nums; }
.belief__of { font-size: 15px; font-weight: 620; font-stretch: 100%; opacity: .6; }
.belief__text h3 { margin-top: auto; max-width: 9em; line-height: .98; } /* air pour les accents en tête de ligne (À, È) */
.belief__p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; max-width: 34ch; opacity: .86; }
.belief__fig { grid-column: 6 / -1; align-self: center; display: flex; flex-direction: column; gap: 12px; }
.belief__screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--ink-2);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55); transform: rotate(var(--tilt, 1.6deg));
}
.belief:nth-child(even) .belief__screen { --tilt: -1.6deg; }
/* Principes IA : une fenêtre d'illustration animée (js/mocks.js) à la place de la capture */
.belief__mock { width: min(100%, 620px); justify-self: center; align-self: center; transform: rotate(var(--tilt, 1.6deg)); }
.belief:nth-child(even) .belief__mock { --tilt: -1.6deg; }
.belief__mock .mock { box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55); }
.belief__fig:has(.belief__mock) { align-items: center; }
.belief__fig:has(.belief__mock) figcaption { width: min(100%, 620px); }
.belief__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.belief__fig figcaption { opacity: .7; padding-left: 2px; }

/* ---------- Ce qu'on ne fait pas ---------- */
.nope__list { margin-top: clamp(32px, 4vw, 64px); border-top: 1px solid var(--line); }
.nope__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
  padding: clamp(18px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--line);
}
.nope__i { grid-column: 1 / span 1; align-self: start; padding-top: .6em; }
.nope__t { grid-column: 2 / span 7; font-size: clamp(36px, 5vw, 88px); line-height: .9; }
.nope__t s {
  text-decoration: none;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 54% / var(--strike, 100%) .09em;
  transition: color .6s var(--ease);
}
.nope__note { grid-column: 10 / -1; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; max-width: 32ch; }
.nope__note .label { color: var(--mute); }
html.motion .nope__t s { --strike: 0%; }
html.motion .nope__note { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
html.motion .nope__row.is-struck .nope__note { opacity: 1; transform: none; }
.nope__row.is-struck .nope__t s { color: var(--mute); }

/* ---------- Avec quoi ---------- */
.nope.section { padding-bottom: clamp(40px, 5vw, 80px); }
.tools { padding-block: clamp(60px, 8vw, 120px) clamp(80px, 10vw, 160px); overflow: hidden; }
.tools__band { margin-top: clamp(32px, 4vw, 64px); border-block: 3px solid var(--ink); }
.tools__m1 { padding-block: clamp(10px, 1.4vw, 20px); }
.tools__m1 .marquee__item { font-size: var(--d-xl); line-height: .9; padding-top: .06em; }
.tools__o { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: max(1.5px, .014em) var(--ink); }
.tools__dot {
  display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--ink);
  margin: 0 .38em; transform: translateY(-.04em);
}
.tools__m2 { border-top: 1px solid var(--line); padding-block: 14px; }
.tools__m2 .marquee__item { font-size: clamp(15px, 1.2vw, 18px); font-weight: 620; padding-right: 1em; }
.tools__m2 b { font-weight: 400; color: var(--mute); margin-left: 1em; }

/* ---------- Basé à Bruxelles ---------- */
.brx { position: relative; }
.brx__in { padding-block: clamp(80px, 10vw, 160px) clamp(56px, 6vw, 96px); }
.brx__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-top: clamp(32px, 4vw, 64px); }
.brx__main .clock { grid-column: 1 / span 7; margin-top: 0; }
.brx__main .brx__grid { grid-column: 8 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; padding-bottom: 6px; }
.brx__sec { grid-column: 1 / -1; }
.clock__time {
  display: flex; align-items: flex-start; font-size: clamp(120px, 27vw, 460px); line-height: .8; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; margin-left: -.03em;
}
.clock__d { position: relative; display: inline-block; overflow: hidden; height: .82em; padding-top: .02em; }
.clock__d > span { display: block; }
.clock__d > span + span { position: absolute; left: 0; top: .02em; }
.clock__colon { display: inline-block; width: .26em; text-align: center; transition: opacity .4s; }
.clock__colon.is-dim { opacity: .25; }
.clock__d.is-o > span { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: max(1.5px, .008em) var(--paper); }
.clock__sec { height: 3px; background: var(--line-d); margin-top: clamp(22px, 2.4vw, 36px); }
.clock__sec i { display: block; height: 100%; width: 100%; background: var(--paper); transform-origin: left center; transform: scaleX(0); }
.brx__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--gap); margin-top: clamp(28px, 3vw, 48px);
}
.brx__cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.brx__big { font-size: clamp(19px, 1.6vw, 24px); font-weight: 620; line-height: 1.2; overflow-wrap: anywhere; }
.brx__lang { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 15px; margin-right: 8px; }

/* ---------- CTA ---------- */
.s-cta { padding-bottom: clamp(80px, 10vw, 150px); overflow: hidden; }
.s-cta__stage { position: relative; --pile-h: clamp(200px, 25vw, 380px); --pile-w: min(25vw, 360px); }
.s-cta__title { text-align: center; }
.s-cta__title .line { display: block; }
.s-cta__title .s-cta__l2 { margin-top: calc(var(--pile-h) - .2em); }
.pile {
  position: absolute; left: 50%; top: calc(var(--d-xxl) * .86); height: var(--pile-h); width: var(--pile-w);
  transform: translateX(-50%); z-index: 2; pointer-events: none;
}
.pile__card {
  position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 16 / 10; margin-top: calc(var(--pile-w) * -.3125);
  border-radius: var(--r); overflow: hidden; background: var(--ink-3);
  box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .45);
}
.pile__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pile__card:nth-child(1) { transform: translateX(-62%) rotate(-7deg); }
.pile__card:nth-child(2) { transform: translateY(-4%) rotate(1deg); z-index: 2; }
.pile__card:nth-child(3) { transform: translateX(62%) rotate(7deg); }
.s-cta__copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; margin-top: clamp(36px, 4vw, 60px); }
.s-cta__copy .lead { max-width: 38ch; }
.s-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .s-hero__intro { grid-column: 1 / span 6; }
  .s-hero__reel { grid-column: 7 / -1; margin-top: 8px; }
  .belief__text { grid-column: 1 / span 6; }
  .belief__fig { grid-column: 7 / -1; }
  .nope__t { grid-column: 2 / span 11; }
  .nope__note { grid-column: 2 / span 8; margin-top: 12px; }
  .brx__main { display: block; }
  .brx__main .brx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(28px, 3vw, 48px); }
}
@media (max-width: 899px) {
  .s-hero__row { display: flex; flex-direction: column; gap: 36px; }
  .s-hero__top .label:not(.s-hero__lang) { grid-column: 3 / span 8; }
  .s-hero__reel { width: 100%; }
  .stack { gap: 20px; }
  .belief__in { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 28px; }
  .belief__text h3 { margin-top: 40px; }
  .belief__fig { width: 100%; }
  .manifest__in { min-height: 0; padding-block: clamp(80px, 14vw, 120px); }
  .manifest__bar { display: none; }
  .manifest__head .label { grid-column: 3 / -1; }
}
@media (max-width: 600px) {
  .s-hero__top .label:not(.s-hero__lang) { grid-column: 3 / span 7; }
  .s-hero__lang { grid-column: 10 / -1; }
  .nope__row { grid-template-columns: 34px 1fr; column-gap: 8px; }
  .nope__i { grid-column: 1; padding-top: .35em; }
  .nope__t { grid-column: 2; font-size: clamp(34px, 10vw, 48px); }
  .nope__note { grid-column: 2; }
  .brx__main .brx__grid { grid-template-columns: 1fr; }
  .s-cta__stage { --pile-h: 190px; --pile-w: 54vw; }
  .pile__card:nth-child(1) { transform: translateX(-30%) rotate(-7deg); }
  .pile__card:nth-child(3) { transform: translateX(30%) rotate(7deg); }
  .s-cta__btns .btn { width: 100%; }
  .s-cta__btns { width: 100%; }
}

/* Mouvement réduit : pas d'inclinaison qui bouge, tout est posé */
html.reduce .belief__screen, html.reduce .belief__mock { transform: none; }