/* ============================================================
   Revalta by Altus Conseil — design-system/sections/revalta-section-feature.css
   ------------------------------------------------------------
   Bloc éditorial RÉUTILISABLE « texte + média décalé ».
   Pensé pour plusieurs usages : philosophie, approche, mise en
   avant d'un service. Ton « Architecture du calme ».

   Variante livrée :
     data-revalta-feature-align="left"
     data-revalta-feature-layout="media-offset"
   → texte à GAUCHE (~5 col) + média unique DÉCALÉ à droite (~6 col)
     + carte flottante OPTIONNELLE qui chevauche le bas-gauche du média.

   La base est conçue pour qu'une future variante
   "texte centré + médias multiples à hauteurs variées" l'étende
   (non codée ici).

   Class names — convention §00 (préfixe .revalta-section-feature) :
     .revalta-section-feature                            (<section>)
       .revalta-section-feature-content                  (wrapper, max 87rem)
         .revalta-section-feature-grid                   (grille 12 col)
           .revalta-section-feature-text                 (colonne texte)
             .revalta-section-feature-header
               .revalta-section-feature-eyebrow          (pastille + label)
                 .revalta-section-feature-eyebrow-dot    (<span> 8px bleu encre)
               .revalta-section-feature-title            (h2 ; -accent = mot bleu encre)
               .revalta-section-feature-lede
             .revalta-btn-group                           (primaire + secondaire)
           .revalta-section-feature-media                (<figure>, contexte pos.)
             .revalta-section-feature-image              (<img> portrait 4:5)
             .revalta-section-feature-card               (slot OPTIONNEL)
               .revalta-section-feature-card-body
                 .revalta-section-feature-card-title     (-accent = mot bleu encre)
                 .revalta-section-feature-card-subtitle
                 .revalta-section-feature-card-text

   Variantes de fond :
     A      .revalta-section-feature                       papier plat + noise
     C-flat .revalta-section-feature.revalta-section-inverse marine plat + noise

   Dépendances : colors_and_type.css (tokens --revalta-*),
   hero.css (.revalta-btn / -primary / -secondary),
   revalta-motion.css (.revalta[data-revalta-lift], [data-revalta-arrow]).
   Comportement parallaxe OPT-IN : revalta-section-feature.js.
   ============================================================ */

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

.revalta-section-feature {
  position: relative;
  background: var(--revalta-bg);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  isolation: isolate;

  /* Air commandé par le padding, jamais par une min-height forcée —
     même respiration que hero / media / cta. */
  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-feature:first-child — compensation globale (body.revalta main > :first-child) */

/* Couche de NOISE — grain léger, discret, jamais visible « comme du bruit ».
   Tuile sans couture, overlay, opacité ~0.04 (bien sous le 0.22 des fonds
   image : ici le fond est plat, le grain ne fait que casser l'aplat). */
.revalta-section-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  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>");
  opacity: 0.04;
  mix-blend-mode: overlay;
  z-index: 0;
  pointer-events: none;
}

/* Wrapper interne — borne la mesure (87rem) et centre. */
.revalta-section-feature-content {
  position: relative;
  z-index: 2;
  max-width: 87rem;
  margin-inline: auto;
}

/* ─── Grille 12 colonnes (desktop ≥ 992px) ─────────────────── */

.revalta-section-feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

/* Bloc TEXTE — ~5 colonnes à gauche. */
.revalta-section-feature-text {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  /* Respiration eyebrow → titre → lede portée par le header ;
     le gap ici sépare le header du groupe de boutons. */
  gap: clamp(1.75rem, 2.4vw, 2.5rem);
  /* Le texte est centré verticalement par rapport au média (align-items:center
     sur la grille) ; on garde un petit padding de respiration. */
  padding-top: clamp(0.5rem, 1.2vw, 1.25rem);
}

/* MÉDIA — ~6 colonnes à droite. Deux images au FORMAT HORIZONTAL (2:1)
   empilées sur deux lignes, chacune en background-cover d'une div.
   La grille étant align-items:center, le texte se centre par rapport à ce bloc. */
.revalta-section-feature-media {
  grid-column: 7 / span 6;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.75rem);
}

/* ─── En-tête de bloc (aligné à gauche dans cette variante) ── */

.revalta-section-feature-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Eyebrow — pastille ronde bleu encre + label. Le label porte la couleur
   SECONDAIRE ; la pastille est l'unique rôle bleu encre (au repos) du bloc
   texte (le hover du bouton est un état, pas un rôle au repos). */
.revalta-section-feature-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--revalta-fg2);
}
.revalta-section-feature-eyebrow-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;          /* exception cercle assumée, comme les pastilles DS */
  background: var(--revalta-accent);
}

/* Titre — Instrument Sans 300, fluide. Mot-clé bleu encre possible via -accent
   (laissé monochrome dans l'exemple : un seul bleu encre au repos = la pastille). */
.revalta-section-feature-title {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: var(--revalta-w-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--revalta-fg1);
  text-wrap: balance;
}
.revalta-section-feature-title-accent { color: var(--revalta-accent); }

/* Lede — secondaire, mesure bornée. */
.revalta-section-feature-lede {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--revalta-w-light);
  line-height: 1.6;
  color: var(--revalta-fg2);
  max-width: 44.7rem;
  text-wrap: pretty;
}

/* ─── Groupe de boutons ────────────────────────────────────── */

.revalta-section-feature .revalta-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Bouton primaire — disque bleu encre qui REMONTE DU BAS pour remplir le
   bouton au survol ; le texte passe en encre. Posé, sans rebond.
   Easing easeInOutCubic (--revalta-ease-inout), 0.5s. */
.revalta-section-feature .revalta-btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  /* Le fond marine vient de .revalta-btn-primary (hero.css). Le délai sur
     la couleur laisse le disque couvrir avant que le texte ne s'éclaircisse. */
  transition: color 0.32s var(--revalta-ease-inout) 0.1s;
}
.revalta-section-feature .revalta-btn-primary > span,
.revalta-section-feature .revalta-btn-primary > svg {
  position: relative;
  z-index: 1;
}
.revalta-section-feature .revalta-btn-primary::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 130%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: var(--revalta-accent);
  border-radius: 100%;          /* cercle : exception assumée */
  z-index: 0;
  pointer-events: none;
  transition: top 0.5s var(--revalta-ease-inout);
}
.revalta-section-feature .revalta-btn-primary:hover,
.revalta-section-feature .revalta-btn-primary:focus-visible {
  color: var(--revalta-bg);       /* papier une fois le disque accent monté */
}
.revalta-section-feature .revalta-btn-primary:hover::before,
.revalta-section-feature .revalta-btn-primary:focus-visible::before {
  top: -65%;
}

/* Bouton secondaire — outline 1px, flèche qui glisse de 4px au survol
   (réutilise [data-revalta-arrow] de la couche motion). */
.revalta-section-feature .revalta-btn-secondary > svg {
  width: 18px;
  height: 18px;
}

/* ─── Médias — deux images horizontales 2:1 (background-cover) ── */
/* Chaque div porte son image via --revalta-feature-img (inline). */

.revalta-section-feature-image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  background-image: var(--revalta-feature-img);
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;        /* 8px — radius doux propre à ce bloc éditorial */
  overflow: hidden;
  background-color: var(--revalta-bg);  /* letterbox papier, jamais blanc */
  /* will-change posé par le JS uniquement si la parallaxe opt-in est active. */
}

/* ─── Carte flottante (slot OPTIONNEL) ─────────────────────── */
/* Chevauche le bas-gauche du média (~4-5 col). La section reste propre
   sans elle. Deux fonds possibles : image full-bleed (défaut) ou frosted. */

.revalta-section-feature-card {
  position: absolute;
  left: clamp(-3rem, -5vw, -5.5rem);
  bottom: clamp(-1.5rem, -2.5vw, -2.75rem);
  z-index: 3;
  width: clamp(16rem, 24vw, 21rem);
  min-height: 22rem;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  color: var(--revalta-fg1);      /* encre (sur fond image voilé) */
  background: var(--revalta-bg);
  /* Ombre douce, très basse opacité, posée bas. */
  box-shadow: 0 4px 24px rgba(15, 27, 51, 0.08);
}

/* Image full-bleed en fond — via --revalta-card-img inline sur la carte. */
.revalta-section-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--revalta-card-img);
  background-size: cover;
  background-position: center;
}
/* Voile pour la lisibilité du texte encre (dégradé papier vers le bas). */
.revalta-section-feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(245, 243, 238, 0.88), rgba(245, 243, 238, 0.42));
}

.revalta-section-feature-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.revalta-section-feature-card-subtitle {
  margin: 0;
  order: -1;                    /* sous-titre eyebrow au-dessus du titre */
  font-size: 0.8125rem;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--revalta-fg2);
}
.revalta-section-feature-card-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--revalta-w-light);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--revalta-fg1);
}
.revalta-section-feature-card-title .revalta-section-feature-title-accent,
.revalta-section-feature-card-title-accent { color: var(--revalta-accent); }
.revalta-section-feature-card-text {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: var(--revalta-w-light);
  line-height: 1.55;
  color: var(--revalta-fg1);
  text-wrap: pretty;
}

/* Variante frosted (alternative au fond image) — voile translucide + flou
   léger. À poser sur la carte à la place de --revalta-card-img. */
.revalta-section-feature-card-frosted::before {
  background-image: none;
  background: rgba(15, 27, 51, 0.32);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.revalta-section-feature-card-frosted::after { background: none; }

/* ────────────────────────────────────────────────────────────
   Variante inverse — fond marine (C-flat)
   ──────────────────────────────────────────────────────────── */
.revalta-section-feature.revalta-section-inverse {
  background: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
}
.revalta-section-feature.revalta-section-inverse .revalta-section-feature-eyebrow { color: var(--revalta-fg2-inverse); }
.revalta-section-feature.revalta-section-inverse .revalta-section-feature-title   { color: var(--revalta-fg1-inverse); }
.revalta-section-feature.revalta-section-inverse .revalta-section-feature-lede    { color: var(--revalta-fg2-inverse); }

/* Bouton primaire en variante marine — fond papier, texte encre
   (sinon un bouton encre serait invisible sur fond marine). */
.revalta-section-feature.revalta-section-inverse .revalta-btn-primary {
  background: var(--revalta-fg1-inverse);
  color: var(--revalta-bg-inverse);
}
.revalta-section-feature.revalta-section-inverse .revalta-btn-primary:hover,
.revalta-section-feature.revalta-section-inverse .revalta-btn-primary:focus-visible {
  color: var(--revalta-bg);       /* papier sur le disque accent */
}

/* La carte garde son fond image voilé (texte encre) sur les deux thèmes :
   son ombre passe juste en version « claire » au-dessus de le marine. */
.revalta-section-feature.revalta-section-inverse .revalta-section-feature-card {
  box-shadow: 0 4px 24px rgba(15, 27, 51, 0.12);
}

/* ────────────────────────────────────────────────────────────
   Responsive — < 992px : passage à 1 colonne
   Média SOUS le texte, décalage annulé. Carte en flux normal,
   pleine largeur (plus de chevauchement). Padding latéral 2rem.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .revalta-section-feature {
    padding-block: clamp(80px, 12vh, 140px);
    padding-inline: 2rem;
  }
  /* .revalta-section-feature:first-child — compensation globale (body.revalta main > :first-child) */

  .revalta-section-feature-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, 6vw, 3rem);
  }
  .revalta-section-feature-text {
    grid-column: 1 / -1;
    padding-top: 0;
  }
  .revalta-section-feature-media {
    grid-column: 1 / -1;
    margin-top: 0;               /* décalage annulé */
  }
  .revalta-section-feature-image {
    /* Le format 2:1 horizontal reste confortable en pleine largeur. */
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 560px) {
  .revalta-section-feature .revalta-btn-group { flex-direction: column; align-items: stretch; }
  .revalta-section-feature .revalta-btn-group .revalta-btn { width: 100%; }
}

/* ────────────────────────────────────────────────────────────
   prefers-reduced-motion: reduce
   Le grain statique reste ; aucune transition de disque, aucun lift.
   (La parallaxe opt-in est déjà neutralisée côté JS.)
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .revalta-section-feature .revalta-btn-primary,
  .revalta-section-feature .revalta-btn-primary::before {
    transition: none;
  }
}

/* ═══ Identité (28/09/2026) — passage arrondis ════════════════
   Grand cadre image 28 px, carte flottante 20 px. */
.revalta-section-feature-media, .revalta-section-feature-image { border-radius: var(--revalta-r-panel); overflow: hidden; }
.revalta-section-feature-card { background: var(--revalta-light); border: 1px solid var(--revalta-sep); border-radius: var(--revalta-r-card); }
.revalta-section-feature-card-text { font-size: 17px; line-height: 1.55; }