/* ============================================================
   Revalta by Altus Conseil — design-system/sections/revalta-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 marine + noise,
               texte papier, 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 .revalta-section-triptych) :
     .revalta-section-triptych                         (<section>)
       .revalta-section-triptych-content               (wrapper, max 1180px)
         .revalta-section-triptych-grid                (grille 3 col)
           .revalta-section-triptych-feature           (panneau éditorial)
             .revalta-section-triptych-feature-media   (image sur-cadrée)
               .revalta-section-triptych-feature-img
             .revalta-section-triptych-feature-inner
               .revalta-section-triptych-feature-head
                 .revalta-section-triptych-feature-eyebrow   (UNIQUE rôle bleu encre)
                 .revalta-section-triptych-feature-title
               .revalta-section-triptych-feature-text
           .revalta-section-triptych-stack             (pile de cartes)
             .revalta-section-triptych-card            (.revalta-surface-like)
               .revalta-section-triptych-card-logo     (img, couleur naturelle)
               .revalta-section-triptych-card-icon     (svg Lucide stroke 1)
               .revalta-section-triptych-card-figure   (chiffre tabulaire)
               .revalta-section-triptych-card-label
               .revalta-section-triptych-card-text
           .revalta-section-triptych-media             (visuel)
             .revalta-section-triptych-media-img

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

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

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

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

/* Première section de la page — respiration de 25vh sous le header fixé. */
/* .revalta-section-triptych:first-child — compensation globale (body.revalta main > :first-child) */

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

/* ─── Grille 3 colonnes ────────────────────────────────────── */
/* Proportions paramétrables via --revalta-trio-cols (3 colonnes) et
   --revalta-trio-cols-2 (2 colonnes), posées inline sur la grille par l'auteur ;
   aucune n'est définie globalement, les valeurs par défaut sont ci-dessous.
   Hauteurs égales : align-items: stretch (défaut). Ordre libre = ordre
   du HTML. Une colonne omise → la grille bascule en 2 pistes égales. */

.revalta-section-triptych-grid {
  display: grid;
  grid-template-columns: var(--revalta-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. */
.revalta-section-triptych-grid:not(:has(> :nth-child(3))) {
  grid-template-columns: var(--revalta-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). */
.revalta-section-triptych-feature,
.revalta-section-triptych-stack,
.revalta-section-triptych-media {
  position: relative;
  min-width: 0;
}

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

.revalta-section-triptych-feature {
  display: flex;
  overflow: hidden;
  isolation: isolate;
  color: var(--revalta-fg1-inverse);              /* texte papier */
  /* filet 1px qui suit la couleur du contenu (papier → 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. */
.revalta-section-triptych-feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.revalta-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. */
.revalta-section-triptych-feature-img[data-revalta-parallax] {
  block-size: 112%;
  top: -6%;
}

/* Voile encre — 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 papier sur n'importe quelle photo. */
.revalta-section-triptych-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--revalta-bg-inverse) 82%, transparent);
  pointer-events: none;
}

/* Noise DS officiel (feTurbulence) — overlay, jamais sur un aplat. */
.revalta-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. */
.revalta-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%;
}
.revalta-section-triptych-feature-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

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

/* Texte — papier atténué (secondaire inverse), mesure bornée. */
.revalta-section-triptych-feature-text {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--revalta-w-light);
  line-height: 1.6;
  color: var(--revalta-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.
   ════════════════════════════════════════════════════════════ */

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

/* Carte — surface contrastée (esprit .revalta-surface : currentColor ~5% +
   filet ~10%). currentColor → marche sur papier ET encre. Pas de radius.
   Contenu centré. Emplacement libre. */
.revalta-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é. */
.revalta-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 bleu encre). */
.revalta-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 bleu encre : l'accent est l'eyebrow). */
.revalta-section-triptych-card-figure {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: var(--revalta-w-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: currentColor;
}

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

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

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

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

/* ════════════════════════════════════════════════════════════
   Variante broll — fond image + voile B/C + noise (niveau section)
   ════════════════════════════════════════════════════════════ */
.revalta-section-triptych[data-revalta-broll] {
  background-image: var(--revalta-broll);
  background-size: cover;
  background-position: center;
}
.revalta-section-triptych[data-revalta-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--revalta-veil);
  z-index: 0;
}
.revalta-section-triptych.revalta-section-inverse[data-revalta-broll]::before {
  background: var(--revalta-veil-inverse);
}
.revalta-section-triptych[data-revalta-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) {
  .revalta-section-triptych {
    padding-block: clamp(72px, 12vh, 130px);
    padding-inline: 2rem;
  }
  /* .revalta-section-triptych:first-child — compensation globale (body.revalta main > :first-child) */

  .revalta-section-triptych-grid,
  .revalta-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. */
  .revalta-section-triptych-media {
    aspect-ratio: 16 / 10;
    block-size: auto;
  }
  /* Les cartes reprennent une hauteur naturelle (plus de flex:1 imposé). */
  .revalta-section-triptych-card {
    flex: 0 0 auto;
    min-block-size: clamp(120px, 26vw, 168px);
  }
  .revalta-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.
   ════════════════════════════════════════════════════════════ */

/* Fondation B — le panneau -feature est une surface inverse : accent et filet suivent la surface. */
.revalta-section-triptych-feature { --revalta-accent: var(--revalta-accent-inverse); --revalta-sep: var(--revalta-sep-inverse); }

/* ═══ Identité (28/09/2026) — passage arrondis / or / pilules ═══
   Panneau éditorial 28 px, cartes et visuel 20 px, étiquettes en pilule, chiffres en or. */
.revalta-section-triptych-feature { border-radius: var(--revalta-r-panel); overflow: hidden; }
.revalta-section-triptych-media, .revalta-section-triptych-feature-media { border-radius: var(--revalta-r-card); overflow: hidden; }
.revalta-section-triptych-card { background: var(--revalta-light); border: 1px solid var(--revalta-sep); border-radius: var(--revalta-r-card); box-shadow: none; }
[data-revalta-band="white"] .revalta-section-triptych-card { background: var(--revalta-bg); border-color: transparent; }
.revalta-section-triptych.revalta-section-inverse .revalta-section-triptych-card { background: rgba(245, 243, 238, 0.06); border-color: var(--revalta-sep-inverse); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.revalta-section-triptych-card-label { border-radius: var(--revalta-r-pill); }
.revalta-section-triptych-card-figure { color: var(--revalta-gold); font-weight: var(--revalta-w-title); letter-spacing: -0.03em; }
.revalta-section-triptych.revalta-section-inverse .revalta-section-triptych-card-figure { color: var(--revalta-gold-inverse); }
.revalta-section-triptych-feature-text { font-size: 17px; line-height: 1.55; }