/* ============================================================
   Altus Conseil — design-system/sections/altus-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-altus-feature-align="left"
     data-altus-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 .altus-section-feature) :
     .altus-section-feature                            (<section>)
       .altus-section-feature-content                  (wrapper, max 87rem)
         .altus-section-feature-grid                   (grille 12 col)
           .altus-section-feature-text                 (colonne texte)
             .altus-section-feature-header
               .altus-section-feature-eyebrow          (pastille + label)
                 .altus-section-feature-eyebrow-dot    (<span> 8px bronze)
               .altus-section-feature-title            (h2 ; -accent = mot bronze)
               .altus-section-feature-lede
             .altus-btn-group                           (primaire + secondaire)
           .altus-section-feature-media                (<figure>, contexte pos.)
             .altus-section-feature-image              (<img> portrait 4:5)
             .altus-section-feature-card               (slot OPTIONNEL)
               .altus-section-feature-card-body
                 .altus-section-feature-card-title     (-accent = mot bronze)
                 .altus-section-feature-card-subtitle
                 .altus-section-feature-card-text

   Variantes de fond :
     A      .altus-section-feature                       charbon plat + noise
     C-flat .altus-section-feature.altus-section-inverse ivoire plat + noise

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

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

.altus-section-feature {
  position: relative;
  background: var(--altus-bg);
  color: var(--altus-fg1);
  font-family: var(--altus-font);
  font-weight: var(--altus-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: 9vw;
}

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

/* 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). */
.altus-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. */
.altus-section-feature-content {
  position: relative;
  z-index: 2;
  max-width: 87rem;
  margin-inline: auto;
}

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

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

/* Bloc TEXTE — ~5 colonnes à gauche. */
.altus-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 s'aligne sur le HAUT ; c'est le média qui descend. */
  padding-top: clamp(0.5rem, 1.2vw, 1.25rem);
}

/* MÉDIA — ~6 colonnes à droite, DÉCALÉ vers le bas (stagger éditorial). */
.altus-section-feature-media {
  grid-column: 7 / span 6;
  position: relative;
  margin: 0;
  /* Décalage : le média démarre plus bas que le texte. */
  margin-top: clamp(2.5rem, 4vw, 3rem);
}

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

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

/* Eyebrow — pastille ronde bronze + label. Le label porte la couleur
   SECONDAIRE ; la pastille est l'unique rôle bronze (au repos) du bloc
   texte (le hover du bouton est un état, pas un rôle au repos). */
.altus-section-feature-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: var(--altus-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--altus-fg2);
}
.altus-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(--altus-accent);
}

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

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

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

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

/* Bouton primaire — disque bronze qui REMONTE DU BAS pour remplir le
   bouton au survol ; le texte passe en ivoire. Posé, sans rebond.
   Easing easeInOutCubic (--altus-ease-inout), 0.5s. */
.altus-section-feature .altus-btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  /* Le fond ivoire vient de .altus-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(--altus-ease-inout) 0.1s;
}
.altus-section-feature .altus-btn-primary > span,
.altus-section-feature .altus-btn-primary > svg {
  position: relative;
  z-index: 1;
}
.altus-section-feature .altus-btn-primary::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 130%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: var(--altus-accent);
  border-radius: 100%;          /* cercle : exception assumée */
  z-index: 0;
  pointer-events: none;
  transition: top 0.5s var(--altus-ease-inout);
}
.altus-section-feature .altus-btn-primary:hover,
.altus-section-feature .altus-btn-primary:focus-visible {
  color: var(--altus-fg1);      /* ivoire une fois le disque monté */
}
.altus-section-feature .altus-btn-primary:hover::before,
.altus-section-feature .altus-btn-primary:focus-visible::before {
  top: -65%;
}

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

/* ─── Média principal — image portrait 4:5 ─────────────────── */

.altus-section-feature-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.5rem;        /* 8px — radius doux propre à ce bloc éditorial */
  overflow: hidden;
  background: var(--altus-bg);  /* letterbox charbon, 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. */

.altus-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(--altus-fg1);      /* ivoire (sur fond image voilé) */
  background: var(--altus-bg);
  /* Ombre douce, très basse opacité, posée bas. */
  box-shadow: 0 4px 24px rgba(20, 17, 13, 0.08);
}

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

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

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

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

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

/* La carte garde son fond image voilé (texte ivoire) sur les deux thèmes :
   son ombre passe juste en version « claire » au-dessus de l'ivoire. */
.altus-section-feature.altus-section-inverse .altus-section-feature-card {
  box-shadow: 0 4px 24px rgba(20, 17, 13, 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) {
  .altus-section-feature {
    padding-block: clamp(80px, 12vh, 140px);
    padding-inline: 2rem;
  }
  .altus-section-feature:first-child { padding-top: 20vh; }

  .altus-section-feature-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, 6vw, 3rem);
  }
  .altus-section-feature-text {
    grid-column: 1 / -1;
    padding-top: 0;
  }
  .altus-section-feature-media {
    grid-column: 1 / -1;
    margin-top: 0;               /* décalage annulé */
  }
  .altus-section-feature-image {
    /* Sur étroit, un portrait 4:5 plein écran est très haut : on assouplit. */
    aspect-ratio: 3 / 4;
    max-height: 70vh;
  }

  /* Carte : repasse en flux normal, pleine largeur, sous l'image. */
  .altus-section-feature-card {
    position: static;
    width: 100%;
    min-height: 16rem;
    margin-top: 1.25rem;
  }
}

@media (max-width: 560px) {
  .altus-section-feature .altus-btn-group { flex-direction: column; align-items: stretch; }
  .altus-section-feature .altus-btn-group .altus-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) {
  .altus-section-feature .altus-btn-primary,
  .altus-section-feature .altus-btn-primary::before {
    transition: none;
  }
}