/* ============================================================
   Altus Conseil — design-system/sections/altus-section-triptych.css
   ------------------------------------------------------------
   Composant de section RÉUTILISABLE « Triptyque » — 3 colonnes
   à hauteurs égales. Les colonnes sont des EMPLACEMENTS, pas des
   contenus figés ; leur ordre est libre et une colonne peut être
   omise (le composant tient aussi en 2 colonnes).

   Trois rôles de colonne :
     -feature  panneau éditorial (image DS + voile ivoire + noise,
               texte charbon, titre en haut / texte en bas)
     -stack    pile de N cartes contrastées (logo, icône+libellé,
               chiffre, ou court texte — emplacement libre)
     -media    visuel plein cadre (catalogue photos DS), parallaxe opt-in

   Convention §00 (préfixe .altus-section-triptych) :
     .altus-section-triptych                         (<section>)
       .altus-section-triptych-content               (wrapper, max 1180px)
         .altus-section-triptych-grid                (grille 3 col)
           .altus-section-triptych-feature           (panneau éditorial)
             .altus-section-triptych-feature-media   (image sur-cadrée)
               .altus-section-triptych-feature-img
             .altus-section-triptych-feature-inner
               .altus-section-triptych-feature-head
                 .altus-section-triptych-feature-eyebrow   (UNIQUE rôle bronze)
                 .altus-section-triptych-feature-title
               .altus-section-triptych-feature-text
           .altus-section-triptych-stack             (pile de cartes)
             .altus-section-triptych-card            (.altus-surface-like)
               .altus-section-triptych-card-logo     (img, couleur naturelle)
               .altus-section-triptych-card-icon     (svg Lucide stroke 1)
               .altus-section-triptych-card-figure   (chiffre tabulaire)
               .altus-section-triptych-card-label
               .altus-section-triptych-card-text
           .altus-section-triptych-media             (visuel)
             .altus-section-triptych-media-img

   Variantes de fond (sur le <section>, indépendantes du panneau) :
     A      .altus-section-triptych                              charbon plat
     B      .altus-section-triptych[data-altus-broll]            charbon + image
     C-flat .altus-section-triptych.altus-section-inverse        ivoire plat
     C      .altus-section-triptych.altus-section-inverse[data-altus-broll]

   Dépendances : colors_and_type.css (tokens --altus-*),
   altus-motion.css (.altus-surface, .altus-parallax-frame,
   [data-altus-reveal] / -stagger, [data-altus-parallax], [data-altus-lift]).
   Aucun JS propre : se branche sur la couche motion partagée.
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */

.altus-section-triptych {
  position: relative;
  background: var(--altus-bg);
  color: var(--altus-fg1);
  font-family: var(--altus-font);
  font-weight: var(--altus-w-light);
  isolation: isolate;
  padding-block: clamp(96px, 14vh, 180px);
  padding-inline: 9vw;
}

/* Première section de la page — respiration de 25vh sous le header fixé. */
.altus-section-triptych:first-child { padding-top: 25vh; }

/* Wrapper interne — borne la mesure (1180px) et centre. */
.altus-section-triptych-content {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin-inline: auto;
}

/* ─── Grille 3 colonnes ────────────────────────────────────── */
/* Proportions paramétrables via --altus-trio-cols (inline sur la grille).
   Hauteurs égales : align-items: stretch (défaut). Ordre libre = ordre
   du HTML. Une colonne omise → la grille bascule en 2 pistes égales. */

.altus-section-triptych-grid {
  display: grid;
  grid-template-columns: var(--altus-trio-cols, 1.05fr 1fr 0.95fr);
  gap: clamp(16px, 1.8vw, 28px);
  align-items: stretch;
}

/* 2 colonnes — quand la grille n'a pas de 3ᵉ enfant direct. */
.altus-section-triptych-grid:not(:has(> :nth-child(3))) {
  grid-template-columns: var(--altus-trio-cols-2, 1fr 1fr);
}

/* Chaque colonne épouse la hauteur de la rangée via align-items: stretch
   (pas de block-size:100% — superflu avec stretch, et source de collapse
   dans certains moteurs de capture/clone). */
.altus-section-triptych-feature,
.altus-section-triptych-stack,
.altus-section-triptych-media {
  position: relative;
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   COLONNE -feature — panneau éditorial
   Image DS + voile ivoire (logique variante C) + noise DS.
   Texte charbon. Titre en HAUT / texte en BAS (space-between).
   ════════════════════════════════════════════════════════════ */

.altus-section-triptych-feature {
  display: flex;
  overflow: hidden;
  isolation: isolate;
  color: var(--altus-fg1-inverse);              /* texte charbon */
  /* filet 1px qui suit la couleur du contenu (charbon → trait sombre). */
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  padding: clamp(28px, 3vw, 48px);
  min-block-size: clamp(420px, 38vw, 500px);
}

/* Image sur-cadrée (sous le voile). Frame overflow:hidden pour la
   parallaxe opt-in — aucun bord révélé pendant le déplacement. */
.altus-section-triptych-feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.altus-section-triptych-feature-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* En parallaxe : on sur-cadre verticalement pour absorber le translate. */
.altus-section-triptych-feature-img[data-altus-parallax] {
  block-size: 112%;
  top: -6%;
}

/* Voile ivoire — logique variante C (texte sombre sur image). Uniforme,
   pas de dégradé. Opacité un cran plus haute que le 0.7 nominal pour
   garantir AA du texte charbon sur n'importe quelle photo. */
.altus-section-triptych-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(235, 229, 218, 0.82);
  pointer-events: none;
}

/* Noise DS officiel (feTurbulence) — overlay, jamais sur un aplat. */
.altus-section-triptych-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}

/* Contenu — réparti haut/bas. */
.altus-section-triptych-feature-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  inline-size: 100%;
}
.altus-section-triptych-feature-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Eyebrow — UNIQUE rôle bronze de la section. */
.altus-section-triptych-feature-eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--altus-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--altus-accent);
}

/* Titre — charbon, Light, fluide. */
.altus-section-triptych-feature-title {
  margin: 0;
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  font-weight: var(--altus-w-light);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--altus-fg1-inverse);
  text-wrap: balance;
}

/* Texte — charbon atténué (secondaire inverse), mesure bornée. */
.altus-section-triptych-feature-text {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--altus-w-light);
  line-height: 1.6;
  color: var(--altus-fg2-inverse);
  max-width: 34ch;
  text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════
   COLONNE -stack — pile de cartes
   N cartes réparties en hauteur (flex:1), gap = celui de la grille.
   ════════════════════════════════════════════════════════════ */

.altus-section-triptych-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 28px);
}

/* Carte — surface contrastée (esprit .altus-surface : currentColor ~5% +
   filet ~10%). currentColor → marche sur charbon ET ivoire. Pas de radius.
   Contenu centré. Emplacement libre. */
.altus-section-triptych-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: clamp(20px, 2vw, 32px);
  min-block-size: 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

/* Slot LOGO — couleur naturelle, jamais déformé. */
.altus-section-triptych-card-logo {
  display: block;
  max-inline-size: 100%;
  max-block-size: clamp(40px, 5vw, 64px);
  inline-size: auto;
  object-fit: contain;
}

/* Slot ICÔNE — Lucide stroke 1, currentColor (jamais bronze). */
.altus-section-triptych-card-icon {
  inline-size: clamp(32px, 3vw, 40px);
  block-size: clamp(32px, 3vw, 40px);
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Slot CHIFFRE — tabulaire, Light (jamais bronze : l'accent est l'eyebrow). */
.altus-section-triptych-card-figure {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: var(--altus-w-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: currentColor;
}

/* Libellé — Medium, casse phrase, sobre. */
.altus-section-triptych-card-label {
  font-size: 0.9375rem;
  font-weight: var(--altus-w-medium);
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: currentColor;
}

/* Texte court — Light, secondaire. */
.altus-section-triptych-card-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--altus-w-light);
  line-height: 1.5;
  color: var(--altus-fg2);
  max-width: 28ch;
  text-wrap: pretty;
}
.altus-section-triptych.altus-section-inverse .altus-section-triptych-card-text {
  color: var(--altus-fg2-inverse);
}

/* ════════════════════════════════════════════════════════════
   COLONNE -media — visuel
   Image catalogue, cover, plein cadre, même hauteur, filet 1px,
   overflow hidden. Parallaxe opt-in sur l'<img> sur-cadrée.
   ════════════════════════════════════════════════════════════ */

.altus-section-triptych-media {
  overflow: hidden;
  background: var(--altus-bg);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.altus-section-triptych-media-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.altus-section-triptych-media-img[data-altus-parallax] {
  block-size: 112%;
  top: -6%;
}

/* ════════════════════════════════════════════════════════════
   Variante inverse — fond ivoire (C-flat / C)
   ════════════════════════════════════════════════════════════ */
.altus-section-triptych.altus-section-inverse {
  background: var(--altus-bg-inverse);
  color: var(--altus-fg1-inverse);
}
/* Le panneau -feature garde sa propre image + voile ivoire + texte charbon
   sur les deux thèmes : rien à inverser à l'intérieur. */

/* ════════════════════════════════════════════════════════════
   Variante broll — fond image + voile B/C + noise (niveau section)
   ════════════════════════════════════════════════════════════ */
.altus-section-triptych[data-altus-broll] {
  background-image: var(--altus-broll);
  background-size: cover;
  background-position: center;
}
.altus-section-triptych[data-altus-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 13, 0.72);
  z-index: 0;
}
.altus-section-triptych.altus-section-inverse[data-altus-broll]::before {
  background: rgba(235, 229, 218, 0.88);
}
.altus-section-triptych[data-altus-broll]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}

/* ════════════════════════════════════════════════════════════
   Responsive — ≤ 900px : 1 colonne empilée (ordre du HTML)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .altus-section-triptych {
    padding-block: clamp(72px, 12vh, 130px);
    padding-inline: 2rem;
  }
  .altus-section-triptych:first-child { padding-top: 20vh; }

  .altus-section-triptych-grid,
  .altus-section-triptych-grid:not(:has(> :nth-child(3))) {
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 24px);
  }

  /* La colonne média n'a plus de hauteur de rangée à épouser :
     on lui donne un ratio propre. */
  .altus-section-triptych-media {
    aspect-ratio: 16 / 10;
    block-size: auto;
  }
  /* Les cartes reprennent une hauteur naturelle (plus de flex:1 imposé). */
  .altus-section-triptych-card {
    flex: 0 0 auto;
    min-block-size: clamp(120px, 26vw, 168px);
  }
  .altus-section-triptych-feature {
    min-block-size: clamp(360px, 70vw, 460px);
  }
}

/* ════════════════════════════════════════════════════════════
   prefers-reduced-motion : la parallaxe est déjà neutralisée côté JS.
   Le voile et le noise restent (statiques). Rien à animer ici.
   ════════════════════════════════════════════════════════════ */