/* ============================================================
   Altus Conseil — colors_and_type.css
   ============================================================
   Variables foundationnelles synchronisées avec tokens.json.
   À importer en premier dans toute mise en page de la marque.
   ============================================================ */

/* Webfont — Albert Sans (Google Fonts, variable 100..900)
   Fallback : Söhne (licence privée) > Helvetica Neue > Arial */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@100..900&display=swap');

:root {
  /* ─── COLORS ───────────────────────────────── */
  --altus-bg:              #14110D;                    /* background */
  --altus-fg1:             #EBE5DA;                    /* textPrimary */
  --altus-fg2:             #8A8377;                    /* textSecondary */
  --altus-accent:          #9C7B4A;                    /* accent (bronze) */
  --altus-sep:             rgba(235, 229, 218, 0.12);  /* separator */

  /* Inverse — pour variante de fond C (voile clair) uniquement */
  --altus-bg-inverse:      #EBE5DA;
  --altus-fg1-inverse:     #14110D;
  --altus-fg2-inverse:     #5B564B;

  /* ─── TYPE ─────────────────────────────────── */
  --altus-font:            "Albert Sans", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --altus-w-light:         300;
  --altus-w-medium:        500;

  --altus-size-titleHero:        88px;
  --altus-size-titleSection:     48px;
  --altus-size-body:             32px;
  --altus-size-label:            14px;
  --altus-size-legalMentions:    18px;
  --altus-size-productNameSmall: 22px;

  --altus-lh-tight:        1.1;
  --altus-lh-normal:       1.5;
  --altus-lh-relaxed:      1.7;
  --altus-lh-legal:        1.8;

  --altus-ls-label:        0.15em;
  --altus-ls-title:        -0.02em;
  --altus-ls-default:      0;

  /* ─── SPACING ──────────────────────────────── */
  --altus-pad-frame:       144px;
  --altus-gap-block:       48px;
  --altus-gap-tight:       12px;

  /* ─── ANIMATION ────────────────────────────── */
  --altus-fps:             30;
  --altus-ease:            cubic-bezier(0.33, 1, 0.68, 1);  /* easeOutCubic */
  --altus-fade-in:         600ms;   /* 18 frames @30fps */
  --altus-fade-out:        467ms;   /* 14 frames @30fps */
  --altus-stagger:         200ms;   /*  6 frames @30fps */
  --altus-translateY:      20px;
  --altus-translateY-out:  -12px;
}

/* ============================================================
   BASE — fond de référence
   ============================================================ */
.altus, .altus * { box-sizing: border-box; }
.altus {
  background: var(--altus-bg);
  color: var(--altus-fg1);
  font-family: var(--altus-font);
  font-weight: var(--altus-w-light);
  line-height: var(--altus-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   SEMANTIC TYPE — usage direct
   ============================================================ */
.altus .h1, .altus h1.altus-hero {
  font-size: var(--altus-size-titleHero);
  font-weight: var(--altus-w-medium);
  line-height: var(--altus-lh-tight);
  letter-spacing: var(--altus-ls-title);
  margin: 0;
}
.altus .h2, .altus h2.altus-section {
  font-size: var(--altus-size-titleSection);
  font-weight: var(--altus-w-medium);
  line-height: 1.15;
  letter-spacing: var(--altus-ls-title);
  margin: 0;
}
.altus .body, .altus p.altus-body {
  font-size: var(--altus-size-body);
  font-weight: var(--altus-w-light);
  line-height: var(--altus-lh-normal);
  margin: 0;
}
.altus .label, .altus .altus-label {
  font-size: var(--altus-size-label);
  font-weight: var(--altus-w-medium);
  letter-spacing: var(--altus-ls-label);
  text-transform: uppercase;
  color: var(--altus-fg2);
}
.altus .product-small {
  font-size: var(--altus-size-productNameSmall);
  font-weight: var(--altus-w-medium);
  letter-spacing: 0.04em;
}
.altus .legal {
  font-size: var(--altus-size-legalMentions);
  font-weight: var(--altus-w-light);
  line-height: var(--altus-lh-legal);
  color: var(--altus-fg2);
  max-width: 60ch;
}

/* Chiffres financiers — toujours tabular */
.altus .figure, .altus .figure-big, .altus .figure-small,
.altus [data-altus-number] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.altus .figure-big {
  font-size: 96px;
  font-weight: var(--altus-w-light);
  color: var(--altus-accent);
  line-height: 1;
}

/* ============================================================
   FRAME — cadre vidéo standard
   ============================================================ */
.altus .altus-frame {
  width: 1920px;
  height: 1080px;
  padding: var(--altus-pad-frame);
  display: flex;
  flex-direction: column;
  gap: var(--altus-gap-block);
  position: relative;
}
.altus .altus-tight  { display: flex; flex-direction: column; gap: var(--altus-gap-tight); }
.altus .altus-block  { display: flex; flex-direction: column; gap: var(--altus-gap-block); }

/* ============================================================
   ANIMATION — keyframes de base (utilitaires)
   ============================================================ */
@keyframes altus-fade-in {
  from { opacity: 0; transform: translateY(var(--altus-translateY)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes altus-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(var(--altus-translateY-out)); }
}
.altus .altus-enter { animation: altus-fade-in var(--altus-fade-in) var(--altus-ease) both; }
.altus .altus-leave { animation: altus-fade-out var(--altus-fade-out) var(--altus-ease) both; }

/* ============================================================
   ICONS — Lucide stroke 1, jamais bronze
   ============================================================ */
.altus svg.altus-icon, .altus .lucide {
  width: 48px;
  height: 48px;
  stroke: var(--altus-fg1);
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   BACKGROUND VARIANTS — A / B / C / D
   ============================================================ */
.altus-bg-A { background: var(--altus-bg); }

.altus-bg-B,
.altus-bg-C,
.altus-bg-D {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.altus-bg-B::before { content: ''; position: absolute; inset: 0; background: rgba(20, 17, 13, 0.72);   z-index: 1; }
.altus-bg-C::before { content: ''; position: absolute; inset: 0; background: rgba(235, 229, 218, 0.88); z-index: 1; }
.altus-bg-D::before { content: ''; position: absolute; inset: 0; background: rgba(20, 17, 13, 0.10);    z-index: 1; }

.altus-bg-B::after,
.altus-bg-C::after,
.altus-bg-D::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.22; mix-blend-mode: overlay; z-index: 2; pointer-events: none;
}

.altus-bg-B > *, .altus-bg-C > *, .altus-bg-D > * { position: relative; z-index: 3; }
.altus-bg-C { color: var(--altus-fg1-inverse); }
.altus-bg-C .altus-label { color: var(--altus-fg2-inverse); }