/* Thème Retux : repris de retux.fr (Inter + JetBrains Mono, angles droits, grilles, bandes sombres/claires) */
@font-face { font-family: Inter; font-weight: 200 600; font-display: swap; src: url(../assets/fonts/inter-latin-Dx4kXJAl.woff2) format("woff2"); unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-weight: 200 600; font-display: swap; src: url(../assets/fonts/inter-latin-ext-DO1Apj_S.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-weight: 300 500; font-display: swap; src: url(../assets/fonts/jbmono-latin-B9CIFXIH.woff2) format("woff2"); unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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-weight: 300 500; font-display: swap; src: url(../assets/fonts/jbmono-latin-ext-DBQx-q_a.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; }

body.t-corp {
  position: relative;
  --d0: #101010; --dl: #242424; --dl2: #333; --dl3: #4d4d4d; --df: #f5f5f5; --df2: #a0a0a0; --df3: #828282;
  --p0: #f4f3f0; --p1: #eceae6; --pl: #dedbd5; --pl2: #c3bfb7; --pl3: #a8a49b; --pf: #161616; --pf2: #585858; --pf3: #6b6b6b;
  --mono: "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --pad: 72px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-weight: 300; background: var(--p0); color: #000;
}
body.t-corp .blobs, body.t-corp .grain, body.t-corp .cursor-glow { display: none; }
body.t-corp .wrap { width: auto; max-width: 1180px; padding-inline: var(--pad); margin-inline: auto; position: relative; z-index: 4; }
:where(body.t-corp) :is(h1, h2, h3) { font-size: inherit; font-weight: inherit; }
body.t-corp .glass, body.t-corp .btn { border-radius: 0; }

.frame { position: absolute; inset: 22px; z-index: 70; pointer-events: none; border: 1px solid rgba(140,140,140,.4); }
.frame b { position: absolute; width: 10px; height: 10px; border: 1px solid #a0a0a080; }
.frame b:nth-child(1) { top: -5.5px; left: -5.5px; } .frame b:nth-child(2) { top: -5.5px; right: -5.5px; }
.frame b:nth-child(3) { bottom: -5.5px; left: -5.5px; } .frame b:nth-child(4) { bottom: -5.5px; right: -5.5px; }
.frame i { position: absolute; font: normal 9px var(--mono); letter-spacing: .24em; color: #969696bf; }
.frame i.tl { top: -6px; left: 26px; padding: 0 8px; } .frame i.br { bottom: -6px; right: 26px; padding: 0 8px; }

/* bandes */
.band { position: relative; overflow: clip; }
.band.dark { --gA: #212121; --gB: #2e2e2e; background: var(--d0); color: #fff; }
.band.light { --gA: #e6e4df; --gB: #d6d2ca; background: var(--p0); color: #000; }
.bp { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bp .g, .bp .G { position: absolute; inset: 0; }
.bp .g { background-image: linear-gradient(var(--gA) 1px, transparent 1px), linear-gradient(90deg, var(--gA) 1px, transparent 1px); background-size: 32px 32px; background-position: 0 var(--gy, 0px); }
.bp .G { background-image: linear-gradient(var(--gB) 1px, transparent 1px), linear-gradient(90deg, var(--gB) 1px, transparent 1px); background-size: 160px 160px; background-position: 0 var(--gY, 0px); }
.band::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,0) 17%, rgba(0,0,0,0) 83%, rgba(0,0,0,.34)); }
.band.light::after { background: linear-gradient(90deg, rgba(60,56,48,.16), rgba(60,56,48,0) 15%, rgba(60,56,48,0) 85%, rgba(60,56,48,.16)); }
.band.dark::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 18% 25%, rgba(255,255,255,.09), transparent 70%), radial-gradient(ellipse 50% 50% at 85% 95%, rgba(255,255,255,.1), transparent 70%); }

/* séparateurs en marches */
.xf { position: relative; height: 192px; overflow: hidden; background: transparent; }
.step { position: absolute; inset: 0; display: flex; flex-direction: column; }
.step i { flex: 1; display: block; position: relative; }
.step i::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--sc) 1px, transparent 1px), linear-gradient(90deg, var(--sc) 1px, transparent 1px); background-size: 32px 32px; }
.x-dl .step i:nth-child(1) { --sc: #242424; background: #101010; } .x-dl .step i:nth-child(2) { --sc: #2b2b2a; background: #1a1a19; }
.x-dl .step i:nth-child(3) { --sc: #383837; background: #242423; } .x-dl .step i:nth-child(4) { --sc: #a9a6a0; background: #bdbab4; }
.x-dl .step i:nth-child(5) { --sc: #d0cdc7; background: #e2dfda; } .x-dl .step i:nth-child(6) { --sc: #e6e4df; background: #f4f3f0; }
.x-ld .step i:nth-child(1) { --sc: #e6e4df; background: #f4f3f0; } .x-ld .step i:nth-child(2) { --sc: #d4d1cb; background: #e6e4df; }
.x-ld .step i:nth-child(3) { --sc: #c0bdb6; background: #d2cfc9; } .x-ld .step i:nth-child(4) { --sc: #383837; background: #242423; }
.x-ld .step i:nth-child(5) { --sc: #2b2b2b; background: #181818; } .x-ld .step i:nth-child(6) { --sc: #242424; background: #101010; }

/* hero */
.hero { position: relative; z-index: 4; text-align: center; max-width: 900px; margin: 0 auto; min-height: 100svh; padding-block: 104px 48px; display: flex; flex-direction: column; justify-content: center; }
.hero .logo-img { display: block; height: 22px; width: auto; margin: 0 auto 36px; }
.kick { font: 10.5px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: #f0f0f0; margin-bottom: 26px; }
.band.light .kick { color: #1a1a1a; }
.hero h1 { color: #f7f7f7; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.05; letter-spacing: -.035em; font-weight: 200; }
.hero h1 b { font-weight: 600; }
.hero .lead { color: #f0f0f0; max-width: 660px; margin: 28px auto 0; font-size: 18.5px; font-weight: 300; line-height: 1.68; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 16px 32px; background: var(--df); color: var(--d0); font: 500 13.5px Inter, sans-serif; border: 0; cursor: pointer; transition: gap .25s; text-transform: none; letter-spacing: 0; }
.btn:hover { gap: 17px; transform: none; box-shadow: none; }
.btn.line { background: transparent; border: 1px solid var(--dl3); color: #fff; }
.band.light .btn { background: var(--pf); color: var(--p0); }
.band.light .btn.line { background: transparent; border: 1px solid var(--pl2); color: #000; }
.meta { margin-top: 34px; font: 300 13px var(--mono); letter-spacing: .08em; color: var(--df2); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.meta span + span::before { content: "·"; margin-right: 14px; }

/* texte et blocs */
.pg { padding-block: 56px; }
.h2c { text-align: center; letter-spacing: -.035em; margin-bottom: 14px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 200; line-height: 1.12; }
.h2c b { font-weight: 600; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; margin: 0; }
.split.rev .sm { order: 2; }
.md { position: relative; overflow: hidden; background: #1d1d1d; aspect-ratio: 4/3; }
.md img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.st h3 { letter-spacing: -.02em; margin-bottom: 14px; font-size: 23px; font-weight: 500; line-height: 1.3; }
.st p { color: #1a1a1a; margin-bottom: 16px; font-size: 15.5px; line-height: 1.8; }
.st p b { color: #000; font-weight: 600; }
.center { max-width: 820px; margin: 0 auto; text-align: center; }
.kv2 { border: 1px solid var(--pl2); background: #fff; max-width: 820px; margin: 24px auto; }
.kv2 > div { display: grid; grid-template-columns: var(--kv2-label, 200px) 1fr; gap: 24px; padding: 17px 22px; border-bottom: 1px solid var(--pl); }
.kv2 > div:last-child { border-bottom: 0; }
.kv2 u { font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #1a1a1a; text-decoration: none; }
.kv2 span { color: #1a1a1a; font-size: 14.5px; line-height: 1.6; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 940px; margin: 40px auto; }
.tri { border: 1px solid var(--dl2); background: #161616; text-align: center; padding: 30px 26px; }
.tri .ic { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 20px; border: 1px solid #e0e0e0; font: 400 15px var(--mono); }
.tri u { display: block; font: 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #f0f0f0; margin-bottom: 10px; text-decoration: none; }
.tri b { display: block; color: #f2f2f2; letter-spacing: -.01em; font-size: 16px; font-weight: 500; line-height: 1.35; }
.tri p { color: #a8a8a8; margin-top: 10px; font-size: 13px; line-height: 1.65; }
.note { font-size: 13.5px; color: var(--pf3); }

/* pied */
.rfoot { position: relative; background: var(--d0); color: #fff; overflow: clip; --gA: #212121; --gB: #2e2e2e; }
.rfoot .wrap { padding-block: 64px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.rfoot img { height: 20px; width: auto; display: block; margin-bottom: 14px; }
.rfoot p, .rfoot a { color: var(--df2); font-size: 13.5px; line-height: 1.9; display: block; }
.rfoot a:hover { color: #fff; }
.rfoot h4 { font: 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--df3); margin-bottom: 12px; }
.rfoot .copy { grid-column: 1 / -1; border-top: 1px solid var(--dl2); padding-top: 22px; font-size: 12px; color: var(--df3); }

@media (max-width: 860px) {
  body.t-corp { --pad: 22px; }
  .frame { inset: 10px; }
  .hero { padding-block: 92px 40px; min-height: 0; }
  .split, .trio, .rfoot .wrap { grid-template-columns: 1fr; }
  .split { gap: 28px; } .split.rev .sm { order: 0; }
  .kv2 > div { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 860px) {
  .hero { text-align: center; }
  .kick { letter-spacing: .18em; font-size: 9.5px; }
  .hero .lead { font-size: 16px; }
  .hero .acts { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
  .hero .acts .btn { width: 100%; }
  .meta { flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
  .meta span + span::before { display: none; }
  .split .st, .split .st[style] { text-align: left !important; }
  .st p { font-size: 15px; }
  .h2c { font-size: clamp(24px, 7vw, 30px); }
  .tri { padding: 24px 20px; }
  .rfoot .wrap { gap: 28px; padding-block: 48px 32px; }
  .band .wrap.pg .acts { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .band .wrap.pg .acts .btn { width: 100%; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div { border-right: 0; padding: 1.2rem .6rem 1rem 0; }
}

@media (max-width: 860px) {
  .band::after, .band.light::after { display: none; }                 /* pas de vignette sur mobile : plus propre et plus fluide */
  .xf { height: 96px; }
  .step i::after { background-size: 24px 24px; }
  .bp .g { background-size: 24px 24px; } .bp .G { background-size: 120px 120px; }
  .st h3, .h2c { text-align: center; }
  .st h3 { font-size: 21px; }
  .kv2 span { font-size: 14px; }
  .kv2 u { text-align: left; }
  .rfoot .wrap { text-align: center; justify-items: center; }
  .rfoot img { margin-inline: auto; }
  .facts { text-align: center; } .facts div { padding: 1rem .4rem; border: 0; border-top: 1px solid var(--line); }
}