/* ============================================================
   UNPHOLD LAB — CROSS-BROWSER COMPATIBILITY LAYER
   Cibles : Chrome desktop, Safari macOS, Safari iOS, Chrome Android,
            Edge desktop, Samsung Internet
   ============================================================ */

/* ---------- 1. FALLBACK color-mix() (Safari < 16.2 / Samsung Internet anciens) ---------- */
@supports not (background: color-mix(in oklab, white 50%, transparent)) {
  .nav { background: rgba(245, 244, 241, 0.85) !important; }
  html[data-theme="dark"] .nav { background: rgba(19, 19, 31, 0.85) !important; }
}

/* ---------- 2. FALLBACK background-clip:text (très anciens navigateurs) ---------- */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text,
  .ul-wordmark,
  .hero h1 .w,
  .split-card .title em,
  .sec-head h2 em,
  .arck-head h2 em,
  .piliers-ia .sec-head h2 em,
  .manifesto blockquote .grad-em,
  .apr-card .num,
  .cta h2 em,
  .foot-big,
  .stats-row .v em,
  .hero-stats .v em,
  .t-hero h1 em,
  .chap-head h2 em,
  .t-manifesto blockquote .grad-em,
  .conv-card .c-num,
  .aud-col h3 em,
  .t-cta h2 em,
  .ia-hero h1 em,
  .ia-hero-marks .val em,
  .ia-cta h2 em {
    background: none !important;
    color: var(--c-rose, #B8338E) !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ---------- 3. PRÉFIXES WEBKIT — hyphens ---------- */
.copy,
p,
.aud-col p,
.cta .copy,
.ia-cta .copy,
.t-cta .copy {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* ---------- 4. TEXT-ALIGN: JUSTIFY sur paragraphes courants ---------- */
/* Cible les paragraphes de prose, exclut footers, légendes, eyebrows, valeurs courtes */
.copy,
p.copy,
.sec-head p,
.arck-head p,
.aud-col p,
.cta .copy,
.ia-cta .copy,
.t-cta .copy,
.pil-card p,
.sol-card p,
.vert-card p,
.conv-card p,
.apr-card p,
.foot-desc {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Mais pas sur mobile très étroit où le justify casse la lisibilité */
@media (max-width: 480px) {
  .copy, p.copy, .sec-head p, .arck-head p, .aud-col p,
  .cta .copy, .ia-cta .copy, .t-cta .copy,
  .pil-card p, .sol-card p, .vert-card p, .conv-card p,
  .apr-card p, .foot-desc {
    text-align: left;
  }
}

/* ---------- 5. DESCENDANTS TYPOGRAPHIQUES — overflow visible ---------- */
/* Empêche le clipping des descenders sur tous les conteneurs de titres */
h1, h2, h3, h4, h5, h6,
.t-hero h1, .ia-hero h1, .hero h1,
.sec-head h2, .arck-head h2, .chap-head h2,
.t-cta h2, .ia-cta h2, .cta h2,
.foot-big, .split-card .title,
blockquote {
  overflow: visible;
  padding-bottom: 0.12em;
}

/* Conteneurs décoratifs avec overflow:hidden — on garde le clip mais on ajoute un padding-bottom au titre interne */
.t-hero h1, .ia-hero h1,
.t-manifesto blockquote, .ia-manifesto blockquote, .manifesto blockquote,
.t-cta h2, .ia-cta h2, .cta h2,
.aud-col h3, .arck-head h2, .chap-head h2,
.foot-big {
  padding-bottom: 0.18em !important;
  line-height: 1.05;
}

/* Spécifique aux <em> en italique avec gradient — Safari descenders */
.t-hero h1 em,
.ia-hero h1 em,
.hero h1 .w,
.split-card .title em,
.sec-head h2 em,
.arck-head h2 em,
.chap-head h2 em,
.t-manifesto blockquote .grad-em,
.manifesto blockquote .grad-em,
.aud-col h3 em,
.t-cta h2 em,
.ia-cta h2 em,
.cta h2 em,
.foot-big em,
.conv-card .c-num,
.apr-card .num {
  display: inline-block;
  padding-bottom: 0.15em;
  padding-right: 0.06em;
  margin-right: -0.02em;
  line-height: 1.1;
}

/* ---------- 6. RESPONSIVE — viewports 1024 / 768 / 480 / 380 ---------- */

/* TICKET SW-040 — Le titre géant "UNPHOLD LAB" du footer doit toujours
   tenir intégralement dans la largeur de l'écran, quel que soit le device.
   Approche : clamp() agressif qui descend avec le viewport + safety net
   `max-width:100%` + `word-break:keep-all` pour rester sur 1 ligne sans
   débordement, sinon wrap propre. */
.foot-big {
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Tablette / petit desktop — réduire le titre géant du footer */
@media (max-width: 1024px) {
  .foot-big { font-size: clamp(64px, 13vw, 140px) !important; }
}

/* Tablette portrait / gros mobile */
@media (max-width: 768px) {
  .foot-big { font-size: clamp(48px, 13.5vw, 100px) !important; letter-spacing: -.03em !important; }
}

@media (max-width: 480px) {
  :root { --pad: 18px; }
  .nav-inner { gap: 16px !important; padding: 12px var(--pad) !important; }
  .nav-links { display: none; }
  .hero h1, .t-hero h1, .ia-hero h1 { font-size: clamp(40px, 11vw, 64px) !important; }
  .sec-head h2, .arck-head h2, .chap-head h2 { font-size: clamp(28px, 8vw, 42px) !important; }
  .cta h2, .t-cta h2, .ia-cta h2 { font-size: clamp(34px, 9vw, 56px) !important; }
  /* SW-040 — viewport mobile : 13vw garantit que "UNPHOLDLAB" (~9 chars × 0.55em)
     reste sous la largeur viewport, en tenant compte du padding latéral */
  .foot-big {
    font-size: clamp(34px, 13vw, 64px) !important;
    letter-spacing: -.025em !important;
    margin-top: 56px !important;
  }
  .split-card { padding: 32px 24px !important; min-height: auto !important; }
  .split-card .title { font-size: clamp(36px, 10vw, 56px) !important; white-space: normal !important; }
  .pil-card, .sol-card, .vert-card { padding: 28px 22px !important; min-height: auto !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .foot-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 380px) {
  :root { --pad: 14px; }
  .ul-wordmark { font-size: 14px !important; letter-spacing: 0 !important; }
  .ul-tagline { font-size: 8.5px !important; letter-spacing: .14em !important; }
  /* SW-040 — iPhone SE (375px) et plus petits : ultra-safe */
  .foot-big {
    font-size: clamp(28px, 12.5vw, 48px) !important;
    letter-spacing: -.02em !important;
    line-height: .9 !important;
  }
}

/* ---------- 7. iOS SAFARI — tap highlight + touch-action ---------- */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---------- 8. SCROLL — scroll-behavior + iOS momentum ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-overflow-scrolling: touch; }

/* ---------- 9. FALLBACK aspect-ratio (Safari < 15) ---------- */
@supports not (aspect-ratio: 1) {
  [style*="aspect-ratio"] { height: auto; }
}

/* ---------- 10. PRINT (PDF export, partages) ---------- */
@media print {
  .nav, .topstrip, .foot-bottom { display: none !important; }
  body { background: white !important; color: black !important; }
}