/* ══════════════════════════════════════════════════════
   RBQC — portfolio.html (Résultats)
   ─────────────────────────────────────────────────────
   Sections :
     1. Hero (hero-number)
     2. Stats (stats-grid, stat-item)
     3. Plateformes (platforms-grid, platform-card)
     4. Preuve / Barres (proof-layout, bar-list, bar-item)
     5. Top Clips (clips-grid, clip-card, clip-thumb)
     6. CTA section
     7. @media ≤ 768px
     8. @media ≤ 480px
   ══════════════════════════════════════════════════════ */

    /* ── Hero ── */
    .hero {
      min-height: auto;
      display: flex; flex-direction: column;
      justify-content: flex-end;
      padding: 140px 64px 80px;
      position: relative; overflow: hidden;
      background: var(--dark);
    }
    .hero::before {
      content: '';
      position: absolute; top: -10%; left: 50%;
      transform: translateX(-55%);
      width: 800px; height: 120%;
      background: radial-gradient(ellipse 45% 65% at 50% -5%, rgba(245,196,0,0.18) 0%, rgba(212,144,10,0.06) 45%, transparent 70%);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute; top: 0; right: -5%;
      width: 500px; height: 100%;
      background: radial-gradient(ellipse 40% 55% at 60% -5%, rgba(200,53,26,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-eyebrow {
      font-size: 0.7rem; font-weight: 500;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 24px;
      display: flex; align-items: center; gap: 14px;
      opacity: 0; animation: fadeUp 0.7s ease 0.2s forwards;
      position: relative; z-index: 1;
    }
    .hero-eyebrow::before {
      content: ''; width: 22px; height: 2px;
      background: var(--mustard); display: block; flex-shrink: 0;
    }
    .hero-number {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900;
      font-size: clamp(6rem, 18vw, 18rem);
      text-transform: uppercase; line-height: 0.82;
      letter-spacing: -0.03em; color: var(--amber);
      opacity: 0; animation: fadeUp 0.7s ease 0.35s forwards;
      position: relative; z-index: 1; margin-bottom: 0;
    }
    .hero-label {
      font-size: clamp(0.8rem, 1.5vw, 1rem);
      font-weight: 500; letter-spacing: 0.2em;
      text-transform: uppercase; color: rgba(255,255,255,0.4);
      opacity: 0; animation: fadeUp 0.7s ease 0.5s forwards;
      position: relative; z-index: 1; margin-bottom: 16px;
    }
    .hero-sub {
      font-size: clamp(1rem, 1.8vw, 1.2rem);
      color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 520px;
      opacity: 0; animation: fadeUp 0.7s ease 0.65s forwards;
      position: relative; z-index: 1;
    }

    /* ── Chiffres complets ── */
    .stats-full { background: var(--surface); }
    .stats-full h2 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: clamp(2.5rem, 5vw, 5rem);
      text-transform: uppercase; line-height: 0.9;
      letter-spacing: -0.02em; margin-bottom: 64px;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px; background: var(--border);
      border: 1px solid var(--border);
    }
    .stat-item {
      background: var(--card); padding: 52px 40px;
      border-top: 3px solid transparent;
      transition: border-color 0.3s, background 0.3s;
      position: relative;
    }
    .stat-item:hover { border-top-color: var(--red); background: var(--paper); }
    .stat-item.highlight { border-top-color: var(--mustard); background: rgba(212,144,10,0.06); }
    .stat-num {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900;
      font-size: clamp(3rem, 5vw, 5.2rem);
      color: var(--dark); line-height: 1; display: block;
      letter-spacing: -0.02em;
    }
    .stat-item.highlight .stat-num { color: var(--mustard); }
    .stat-lbl {
      font-size: 0.7rem; font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin-top: 12px; display: block;
    }
    .stat-sub { font-size: 0.62rem; color: rgba(122,107,85,0.6); margin-top: 4px; }

    /* ── Plateformes ── */
    .platforms { background: var(--paper); }
    .platforms h2 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: clamp(2.5rem, 5vw, 5rem);
      text-transform: uppercase; line-height: 0.9;
      letter-spacing: -0.02em; margin-bottom: 64px;
    }
    .platforms-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 2px; background: var(--border);
      border: 1px solid var(--border);
    }
    .platform-card {
      background: var(--card); padding: 44px 32px;
      text-align: center; position: relative;
      border-bottom: 3px solid transparent;
      transition: border-color 0.3s, background 0.3s;
    }
    .platform-card:hover { border-bottom-color: var(--red); background: var(--surface); }
    .platform-icon { font-size: 2.2rem; display: block; margin-bottom: 16px; }
    .platform-name {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 700; font-size: 1.2rem;
      text-transform: uppercase; color: var(--dark); margin-bottom: 8px;
    }
    .platform-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.65; }

    /* ── Contexte marché ── */
    .market { background: var(--dark); position: relative; overflow: hidden; }
    .market::before {
      content: '';
      position: absolute; top: -80px; right: -80px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(245,196,0,0.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .market h2 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: clamp(2.5rem, 5vw, 5rem);
      text-transform: uppercase; line-height: 0.9;
      letter-spacing: -0.02em; margin-bottom: 64px; color: white;
    }
    .market-cols {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px; background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .market-col {
      padding: 48px 44px;
      display: flex; flex-direction: column; gap: 32px;
    }
    .market-col.usa { background: #231810; }
    .market-col.qc  { background: #2a1f0e; border-left: 3px solid var(--amber); }
    .market-col-badge {
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }
    .market-col.qc .market-col-badge { color: var(--amber); }
    .market-col-title {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: clamp(1.6rem, 2.8vw, 2.4rem);
      text-transform: uppercase; line-height: 0.95;
      letter-spacing: -0.01em; color: rgba(255,255,255,0.45);
    }
    .market-col.qc .market-col-title { color: white; }
    .market-points {
      list-style: none; display: flex; flex-direction: column; gap: 12px;
    }
    .market-points li {
      font-size: 0.88rem; color: rgba(255,255,255,0.4);
      line-height: 1.6; padding-left: 16px; position: relative;
    }
    .market-points li::before {
      content: '—'; position: absolute; left: 0;
      color: rgba(255,255,255,0.15);
    }
    .market-col.qc .market-points li { color: rgba(255,255,255,0.65); }
    .market-col.qc .market-points li::before { color: var(--amber); }
    .market-stat-row {
      display: flex; align-items: baseline; gap: 12px;
      margin-top: auto; padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .market-stat-num {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: 3rem;
      color: rgba(255,255,255,0.2); line-height: 1;
    }
    .market-col.qc .market-stat-num { color: var(--amber); }
    .market-stat-lbl {
      font-size: 0.7rem; color: rgba(255,255,255,0.25);
      line-height: 1.4; max-width: 160px;
    }
    .market-col.qc .market-stat-lbl { color: rgba(255,255,255,0.5); }

    /* ── Preuve sociale ── */
    .proof { background: var(--surface); }
    .proof h2 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: clamp(2.5rem, 5vw, 5rem);
      text-transform: uppercase; line-height: 0.9;
      letter-spacing: -0.02em; margin-bottom: 64px;
    }
    .proof-layout {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center;
    }
    .proof-context p {
      font-size: 0.95rem; color: var(--muted);
      line-height: 1.85; margin-bottom: 20px;
    }
    .proof-stat-row { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
    .proof-stat {
      display: flex; align-items: baseline; gap: 16px;
      padding: 18px 20px; background: var(--card);
      border-left: 3px solid var(--mustard);
    }
    .proof-stat-num {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: 2.2rem;
      color: var(--dark); line-height: 1; flex-shrink: 0;
    }
    .proof-stat-info { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
    .proof-stat-info strong { color: var(--dark); display: block; font-size: 0.9rem; margin-bottom: 2px; }

    /* ── CTA ── */
    .cta-section {
      background: var(--paper); padding: 120px 64px;
      text-align: center; position: relative;
      border-top: 2px solid var(--border);
    }
    .cta-label {
      font-size: 0.68rem; font-weight: 500;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 20px;
    }
    .cta-title {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: clamp(3rem, 8vw, 8rem);
      color: var(--dark); text-transform: uppercase;
      line-height: 0.87; letter-spacing: -0.02em; margin-bottom: 52px;
    }
    .cta-sub { margin-top: 24px; font-size: 0.72rem; color: var(--muted); }

    @media (max-width: 768px) {
      .hero { padding: 80px 24px 44px; min-height: 0; justify-content: flex-start; }
      .hero-number { font-size: clamp(5rem, 22vw, 10rem); }
      .stats-grid     { grid-template-columns: repeat(2, 1fr); }
      .stat-item      { padding: 36px 24px; }
      .platforms-grid { grid-template-columns: repeat(2, 1fr); }
      .platform-card  { padding: 32px 20px; }
      .proof-layout   { grid-template-columns: 1fr; gap: 40px; }
      .market-cols    { grid-template-columns: 1fr; }
      .market-col     { padding: 36px 24px; }
      .market-col.qc  { border-left: none; border-top: 3px solid var(--amber); }
      .cta-section    { padding: 72px 24px; }
    }
    @media (max-width: 480px) {
      .hero { padding: 80px 20px 44px; }
      .stats-grid     { grid-template-columns: 1fr; }
      .platforms-grid { grid-template-columns: 1fr; }
      .platform-card  { padding: 28px 20px; }
    }

    /* ── Brand social links ── */
    .brand-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 16px;
    }
    .brand-link {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 2px;
      transition: color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }
    .brand-link:hover { color: var(--dark); border-color: var(--dark); }

    /* ── Brand clip thumbs (études de cas) ── */
    .brand-clip-thumb {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16/7;
    }
    .brand-clip-thumb img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── Timeline headings ── */
    .timeline-period {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900;
      font-size: 1.4rem;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 16px;
    }
    .timeline-milestone {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900;
      font-size: 2.2rem;
      color: var(--dark);
      line-height: 1;
      margin-bottom: 12px;
    }
    .timeline-desc {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.65;
    }

    /* ── Top Clips ── */
    .top-clips { background: var(--dark); }
    .top-clips h2 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900; font-size: clamp(2.5rem, 5vw, 5rem);
      text-transform: uppercase; line-height: 0.9;
      letter-spacing: -0.02em; margin-bottom: 64px; color: white;
    }
    .clips-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 2px; background: #333; border: 2px solid #fff;
    }
    .clip-card {
      background: #120D06;
      display: flex; flex-direction: column;
      transition: background 0.3s;
    }
    .clip-card:hover { background: #1E1509; }
    .clip-thumb {
      aspect-ratio: 9/14;
      background: linear-gradient(160deg, #3D1A08 0%, #1A0D04 50%, #2A1206 100%);
      background-size: cover; background-position: center center;
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .clip-thumb-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(10,6,2,0.85) 0%, transparent 50%);
    }
    .clip-thumb-title {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 20px 16px 16px;
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 700; font-size: 1rem;
      text-transform: uppercase; color: white;
      line-height: 1.2; letter-spacing: 0.02em;
      z-index: 1;
    }
    .clip-play {
      width: 52px; height: 52px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
    }
    .clip-play svg { margin-left: 3px; }
    .clip-meta {
      padding: 16px 20px 12px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .clip-platform {
      font-size: 0.6rem; font-weight: 600;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.3); margin-bottom: 4px;
    }
    .clip-page {
      font-size: 0.78rem; color: rgba(255,255,255,0.6); font-weight: 500;
    }
    .clip-stats {
      display: flex; gap: 20px;
      padding: 12px 20px 20px;
    }
    .clip-stat {
      display: flex; align-items: center; gap: 6px;
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 700; font-size: 1rem;
      color: var(--amber); letter-spacing: 0.02em;
    }
    .clip-stat svg { opacity: 0.6; }
    @media (max-width: 768px) {
      .clips-grid { grid-template-columns: 1fr; }
      .clip-thumb { aspect-ratio: 16/9; }
    }