/* ============================================================
   MDJLABS — Page « À propos » (ouverture entreprise)
   Hero d'ouverture · Conviction · Écosystème (signature) ·
   L'humain derrière le labo · CTA. Dark-native, accent phosphore.
   Rapatrié de Claude Design (projet MDJLABS). Bloc GLITCH + LUMINOSITÉ
   de la photo ajouté à l'intégration (bas du fichier).
   ============================================================ */

.ap-flow { position: relative; }
.ap-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

/* libellé de section — carnet de labo */
.ap-eyebrow { font-family: var(--ff-mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 clamp(18px, 2.6vh, 28px); }
.ap-eyebrow .n { color: var(--acc); font-weight: 600; }

/* ============================================================
   01 — HERO D'OUVERTURE
   ============================================================ */
.ap-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: clamp(96px, 16vh, 160px) 0 clamp(48px, 9vh, 96px); }
.ap-hero-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ap-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 15% 8%, transparent 40%, color-mix(in oklab, var(--bg-0) 62%, transparent) 100%), linear-gradient(180deg, transparent 55%, var(--bg-0) 100%); }
.ap-hero-inner { position: relative; z-index: 2; width: 100%; }

.ap-badge { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--ff-mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); padding: 8px 14px; border: 1px solid var(--acc-line); border-radius: 999px; background: var(--acc-soft); margin: 0 0 clamp(24px, 4vh, 40px); }
.ap-badge .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 10px var(--acc); }

.ap-hero-mark { display: block; font-size: clamp(52px, 12vw, 168px); line-height: 0.92; letter-spacing: -0.01em; margin: 0 0 clamp(20px, 3.4vh, 40px); }
.ap-hero-mark b { text-shadow: 0 0 40px var(--acc-glow); }

.ap-hero-title { font-family: var(--ff-sans); font-weight: 600; font-size: clamp(22px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; max-width: 20ch; text-wrap: balance; }
.ap-hero-title .l1 { display: block; color: var(--fg-1); font-weight: 500; }
.ap-hero-title .l2 { display: block; color: var(--fg-0); }
.ap-hero-title em { font-style: normal; color: var(--acc); }

.ap-hero-foot { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(18px, 4vw, 40px); margin-top: clamp(32px, 5vh, 56px); }
.ap-scroll { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-0); padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ap-scroll:hover { border-color: var(--acc-line); color: var(--acc); }
.ap-scroll svg { animation: apBob 1.8s var(--ease) infinite; }
@keyframes apBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.ap-hero-tags { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: var(--ff-mono); font-size: clamp(9.5px, 1vw, 11px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.ap-hero-tags b { font-weight: 500; color: var(--fg-1); }
.ap-hero-tags .sep { width: 4px; height: 4px; border-radius: 999px; background: var(--fg-3); }

/* orchestration d'entrée — animations CSS autonomes */
@media (prefers-reduced-motion: no-preference) {
  .ap-hero .ap-badge { animation: apRise 0.7s var(--ease) both; animation-delay: 0.1s; }
  .ap-hero-mark { animation: apMark 0.9s var(--ease) both; animation-delay: 0.28s; }
  .ap-hero-title .l1 { animation: apRise 0.7s var(--ease) both; animation-delay: 0.62s; }
  .ap-hero-title .l2 { animation: apRise 0.7s var(--ease) both; animation-delay: 0.74s; }
  .ap-hero-foot { animation: apRise 0.7s var(--ease) both; animation-delay: 0.92s; }
  @keyframes apRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes apMark { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
}

/* ============================================================
   02 — NOTRE CONVICTION
   ============================================================ */
.ap-conv { padding: clamp(72px, 13vh, 150px) 0; border-top: 1px solid var(--line-weak); }
.ap-conv-lead { font-size: clamp(17px, 2vw, 24px); line-height: 1.55; color: var(--fg-1); max-width: 46ch; margin: 0 0 clamp(28px, 5vh, 52px); text-wrap: pretty; }
.ap-punch { position: relative; margin: 0; padding-left: clamp(20px, 4vw, 56px); border-left: 2px solid var(--acc-line); }
.ap-punch-q { position: absolute; left: clamp(-6px, 0.5vw, 4px); top: -0.3em; font-family: var(--ff-mono); font-size: clamp(40px, 6vw, 80px); line-height: 1; color: var(--acc-line); }
.ap-punch p { margin: 0; font-weight: 600; font-size: clamp(28px, 5.2vw, 66px); line-height: 1.08; letter-spacing: -0.025em; color: var(--fg-0); max-width: 16ch; text-wrap: balance; }
.ap-punch em { font-style: normal; color: var(--acc); text-shadow: 0 0 44px var(--acc-glow); }

/* ============================================================
   03 — L'ÉCOSYSTÈME (signature)
   ============================================================ */
.ap-eco { padding: clamp(72px, 13vh, 150px) 0; border-top: 1px solid var(--line-weak); }
.ap-eco-head { margin-bottom: clamp(32px, 6vh, 64px); }
.ap-eco-ttl { font-weight: 600; font-size: clamp(30px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.03em; color: var(--fg-0); margin: 0; text-wrap: balance; }
.ap-eco-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }

.ap-eco-viz { position: relative; margin: 0; aspect-ratio: 4 / 3.2; border: 1px solid var(--line); border-radius: var(--r-md); background: radial-gradient(90% 90% at 50% 42%, var(--bg-1) 0%, var(--bg-0) 100%); overflow: hidden; }
.ap-eco-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-eco-cap { position: absolute; left: 14px; bottom: 12px; font-family: var(--ff-mono); font-size: clamp(8.5px, 0.9vw, 10.5px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }

.ap-eco-copy { font-size: clamp(15px, 1.6vw, 19px); line-height: 1.6; color: var(--fg-1); margin: 0 0 clamp(22px, 3.5vh, 34px); text-wrap: pretty; }
.ap-eco-copy .wm { font-size: 0.92em; }
.ap-verbs { list-style: none; margin: 0 0 clamp(22px, 3.5vh, 34px); padding: 0; display: flex; flex-direction: column; gap: clamp(4px, 1vh, 10px); }
.ap-verb { display: flex; align-items: baseline; gap: clamp(12px, 1.6vw, 20px); font-weight: 600; font-size: clamp(28px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.03em; color: var(--fg-3); transition: color 0.5s var(--ease); }
.ap-verb .vn { font-family: var(--ff-mono); font-size: clamp(11px, 1vw, 13px); font-weight: 500; letter-spacing: 0.1em; color: var(--fg-3); transform: translateY(-0.4em); transition: color 0.5s var(--ease); }
.ap-verb .vw { position: relative; }
.ap-verb.is-on { color: var(--fg-0); }
.ap-verb.is-on .vn { color: var(--acc); }
.ap-verb.is-on .vw { color: var(--acc); text-shadow: 0 0 40px var(--acc-glow); }
.ap-eco-tail { font-size: clamp(13.5px, 1.3vw, 15.5px); line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 40ch; text-wrap: pretty; }

/* ============================================================
   04 — L'HUMAIN DERRIÈRE LE LABO
   ============================================================ */
.ap-founder { padding: clamp(72px, 13vh, 150px) 0; border-top: 1px solid var(--line-weak); }
.ap-founder-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ap-portrait { margin: 0; }
.ap-portrait-frame { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px) 0; overflow: hidden; }
.ap-portrait-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line-weak) 1px, transparent 1px), linear-gradient(90deg, var(--line-weak) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.6; pointer-events: none; }
.ap-portrait-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 120%, var(--acc-soft), transparent 70%); pointer-events: none; z-index: 3; }
.ap-portrait-frame img { position: relative; display: block; width: 100%; height: auto; }
.ap-portrait-tag { position: absolute; left: 16px; top: 16px; z-index: 4; font-size: 10px; letter-spacing: 0.16em; color: var(--acc); background: var(--bg-0); border: 1px solid var(--acc-line); border-radius: var(--r-xs); padding: 5px 9px; }

.ap-founder-ttl { font-weight: 600; font-size: clamp(30px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--fg-0); margin: 0 0 clamp(16px, 2.6vh, 26px); text-wrap: balance; }
.ap-founder-id { display: flex; flex-direction: column; gap: 5px; margin: 0 0 clamp(18px, 3vh, 28px); }
.ap-founder-id .nm { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--fg-0); letter-spacing: -0.01em; }
.ap-founder-id .role { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.ap-founder-bio { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62; color: var(--fg-1); margin: 0 0 clamp(24px, 4vh, 38px); max-width: 52ch; text-wrap: pretty; }
.ap-founder-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(12px, 1.6vw, 20px); border-top: 1px solid var(--line-weak); padding-top: clamp(20px, 3vh, 28px); }
.ap-founder-facts li { display: flex; flex-direction: column; gap: 6px; }
.ap-founder-facts .k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }
.ap-founder-facts .v { font-size: clamp(13.5px, 1.3vw, 15px); color: var(--fg-1); line-height: 1.4; }

/* ============================================================
   05 — CTA
   ============================================================ */
.ap-cta { padding: clamp(80px, 15vh, 170px) 0 clamp(96px, 18vh, 200px); border-top: 1px solid var(--line-weak); text-align: center; }
.ap-cta .ap-eyebrow { text-align: center; }
.ap-cta-ttl { font-weight: 600; font-size: clamp(38px, 8vw, 108px); line-height: 0.98; letter-spacing: -0.035em; color: var(--fg-0); margin: 0 0 clamp(32px, 6vh, 56px); }
.ap-cta-ttl em { font-style: normal; color: var(--acc); text-shadow: 0 0 50px var(--acc-glow); }
.ap-cta-actions { display: inline-flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 22px); }
.ap-cta .btn-primary { font-size: clamp(14px, 1.4vw, 16px); padding: 15px 28px; }
.ap-cta-note { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .ap-eco-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vh, 44px); }
  .ap-eco-viz { aspect-ratio: 16 / 11; max-height: 62vh; }
  .ap-founder-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vh, 44px); }
  .ap-portrait { max-width: 380px; }
}
@media (max-width: 560px) {
  .ap-hero { min-height: 92svh; }
  .ap-hero-title { font-size: clamp(20px, 6vw, 30px); }
  .ap-hero-foot { gap: 18px; }
  .ap-punch { padding-left: 18px; }
  .ap-verb { font-size: clamp(30px, 11vw, 48px); }
}

/* ============================================================
   AJOUT INTÉGRATION — PHOTO « DIRECT DU LABO » : luminosité
   harmonisée (assombrie, désaturée) + effet GLITCH discret/ambiance
   (aberration chromatique permanente + micro-glitch occasionnel +
   scanlines). Respecte prefers-reduced-motion.
   ============================================================ */
/* luminosité labo renforcée + aberration chromatique douce permanente */
.ap-portrait-frame img {
  filter: grayscale(0.42) contrast(1.06) brightness(0.82)
          drop-shadow(1.2px 0 0 rgba(255,42,90,0.34)) drop-shadow(-1.2px 0 0 rgba(46,230,200,0.30));
}
/* scanlines subtiles au-dessus de la photo */
.ap-portrait-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
  /* micro-glitch occasionnel (décalage de bandes bref, toutes ~7s) */
  .ap-portrait-frame img { animation: apPhotoGlitch 7s steps(1) infinite; }
  @keyframes apPhotoGlitch {
    0%, 93%, 100% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
    93.5% { clip-path: inset(16% 0 60% 0); transform: translateX(-3px); }
    94%   { clip-path: inset(50% 0 28% 0); transform: translateX(3px); }
    94.5% { clip-path: inset(6% 0 82% 0);  transform: translateX(-2px); }
    95%   { clip-path: inset(72% 0 10% 0); transform: translateX(2px); }
    95.5% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
  }
  /* micro-secousse glitch au survol */
  .ap-portrait-frame:hover img { animation: apPhotoGlitchHover 0.42s steps(1) 1; }
  @keyframes apPhotoGlitchHover {
    0% { clip-path: inset(0 0 0 0); transform: translateX(0);
         filter: grayscale(0.42) contrast(1.06) brightness(0.82) drop-shadow(2px 0 0 rgba(255,42,90,0.5)) drop-shadow(-2px 0 0 rgba(46,230,200,0.5)); }
    25% { clip-path: inset(20% 0 55% 0); transform: translateX(-4px); }
    50% { clip-path: inset(58% 0 22% 0); transform: translateX(4px); }
    75% { clip-path: inset(8% 0 78% 0); transform: translateX(-2px); }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0);
           filter: grayscale(0.42) contrast(1.06) brightness(0.82) drop-shadow(1.2px 0 0 rgba(255,42,90,0.34)) drop-shadow(-1.2px 0 0 rgba(46,230,200,0.30)); }
  }
}