/* =============================================================
   BLOC newalpha_split — Split image + piliers (New Alpha)
   Port fidèle de .newalpha (maquette 2026-06-10, style.css 3155-3312 + 3962).
   Dépendances communes (NE PAS redéfinir) :
   - variables :root (--c-blue, --c-copper, --ff-display, --ff-mono, --text-base) → common.css
   - .section-num (base mono/copper)                                              → common.css
   - .wrap, .section-statement / __intro / __item / __sep + reveal                → common.css
   - animation de la conclusion → scroll-engine.js ([data-section-statement])

   Note archi K2 : sur la home, cette section FERME la .bg-fade-zone et sert de
   déclencheur du fondu bleu nuit → bleu Master #00394D (scroll-engine.js cale le
   fondu sur l'arrivée de .newalpha). Le fond solide ci-dessous est le FALLBACK
   hors-zone, neutralisé dans .bg-fade-zone.

   Entrée scrubbée (photo ←, intro →, piliers stagger) : js/blocs/newalpha-split.js
   ============================================================= */

.newalpha {
  position: relative;
  background: var(--c-blue);   /* fallback hors-zone ; neutralisé dans .bg-fade-zone */
  color: #fff;
  padding-bottom: var(--pad-section);
}
.newalpha__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
  /* Évite tout scroll horizontal pendant les translations d'entrée. */
  overflow: hidden;
}
/* Entrées liées au scroll (pilotées par newalpha-split.js) — transitions douces
   pour lisser le scrubbing. État de repos = visible (le JS gère l'opacité). */
.newalpha__media,
.newalpha__intro,
.newalpha__pillar {
  will-change: transform, opacity;
  transition: transform 0.15s linear, opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .newalpha__media,
  .newalpha__intro,
  .newalpha__pillar {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}
.newalpha__media {
  position: relative;
  overflow: hidden;
  /* Arrondi bas-droite prononcé (modif client 2026-05-11). */
  border-bottom-right-radius: clamp(180px, 22vw, 340px);
}
.newalpha__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.05);
}
.newalpha__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.5vh, 36px);
  padding: clamp(60px, 8vh, 120px) clamp(40px, 5vw, 100px);
}
/* Bloc texte du haut (titre, sous-titre, lead) — animé indépendamment des
   piliers (entre par la droite), pour que les piliers entrent ensuite un à un. */
.newalpha__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vh, 36px);
}
.newalpha__body .section-num {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-copper);
}
.newalpha__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.newalpha__title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
  letter-spacing: -0.01em;
}
/* « New Alpha » du titre : rendu par le logo de marque (asset statique blanc)
   à la place du texte en emphase, sur sa propre ligne sous le début du titre,
   cliquable vers newalpha.com (nouvel onglet). Le lien borne la zone cliquable
   à la largeur du logo ; le logo porte la hauteur (agrandie). */
.newalpha__title-logo-link {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 0.6rem;
}
.newalpha__title-logo {
  display: block;
  width: auto;
  /* Logo agrandi ×1,5 (était clamp(1.7rem, 3vw, 3rem)). */
  height: clamp(2.55rem, 4.5vw, 4.5rem);
}
/* Sous-titre : plus petit que le titre, italic cuivre sur le mot-clé. */
.newalpha__subtitle {
  margin: 0;
  /* Respiration entre le titre (h2 + logo) et le sous-titre. */
  margin-top: 1rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.newalpha__subtitle em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
  letter-spacing: -0.005em;
}
.newalpha__lead {
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 50ch;
  margin: 0;
}
.newalpha__sublead {
  font-size: var(--text-base);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.newalpha__pillars {
  list-style: none;
  padding: 0;
  margin: clamp(8px, 1.5vh, 20px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vh, 32px);
}
.newalpha__pillar {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
/* Icônes des piliers — forme goutte (= bouton scroll-up), fond BLANC, liseré
   DORÉ, glyphe BLEU FONCÉ. Span pastille + SVG inline (theming currentColor). */
.newalpha__pillar-icon {
  flex-shrink: 0;
  width: clamp(56px, 4.4vw, 88px);
  height: clamp(56px, 4.4vw, 88px);
  color: var(--c-blue);
  background: #fff;
  border: 2px solid var(--c-copper);
  border-radius: 50% 50% 50% 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.newalpha__pillar-icon svg {
  width: 58%;
  height: 58%;
}
.newalpha__pillar-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.newalpha__pillar-desc {
  margin: 4px 0 0;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
}

/* =================== RESPONSIVE (≤ 1024px) =================== */
@media (max-width: 1024px) {
  .newalpha__split { grid-template-columns: 1fr; min-height: auto; }
  .newalpha__media { aspect-ratio: 16 / 10; }
}