/* ════════════════════════════════════════════════════════════════════
   Win'Event — pages/about.css  (page « Qui suis-je ? »)
   ════════════════════════════════════════════════════════════════════ */
@layer pages {

  /* ── Intro : texte + la carte « Qui suis-je ? » ─────────────────── */
  .about-hero { overflow: clip; }
  .about-hero__grid { align-items: center; }
  /* Laisse respirer le coup de pinceau doré (il déborde de 0.22em sous le titre) */
  .about-hero .brush-title { margin-bottom: 0.45em; }
  .about-hero__hello {
    display: block;
    font-family: var(--font-script);
    font-size: var(--fs-script);
    line-height: 1.1;
    color: var(--gold);
    margin: 0.4rem 0 1rem;
  }
  .about-hero .lead { max-width: 40rem; }

  .about-facts {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 0.8rem;
    margin: 1.8rem 0 2.2rem;
  }
  .about-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    color: var(--on-ink);
  }
  .about-facts svg { width: 14px; height: 14px; color: var(--gold); flex: none; }

  /* La carte flotte doucement, avec un halo doré qui respire */
  .about-card {
    position: relative;
    min-width: 0;
    width: min(100%, 520px);
    margin-inline: auto;
    animation: aboutFloat 6.5s ease-in-out infinite;
  }
  .about-card figure {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    animation: aboutGlow 6.5s ease-in-out infinite;
  }
  .about-card figure::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px rgba(234,217,160,.25);
    pointer-events: none;
  }
  .about-card img { display: block; width: 100%; height: auto; }
  @keyframes aboutFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
  @keyframes aboutGlow {
    0%, 100% { box-shadow: 0 30px 80px rgba(0,0,0,.5); }
    50%      { box-shadow: 0 42px 90px rgba(0,0,0,.55), 0 0 55px rgba(201,162,39,.35); }
  }

  /* ── Mon histoire ──────────────────────────────────────────────── */
  .about-story { max-width: 46rem; margin-inline: auto; }
  .about-story p { font-size: var(--fs-body); line-height: 1.8; color: var(--on-chalk-mut, #4a463f); }
  .about-story p + p { margin-top: 1.2em; }
  .about-story strong { color: var(--graphite); font-weight: 500; }
  .about-quote {
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
    padding: 0.4rem 0 0.4rem clamp(1.2rem, 1rem + 1vw, 2rem);
    border-left: 3px solid var(--gold);
    font-family: var(--font-script);
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
    line-height: 1.3;
    color: var(--bronze);
  }
  .about-quote span { display: block; font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-chalk-mut, #4a463f); margin-bottom: 0.4rem; }
  .about-story .about-sign {
    margin-top: 2rem;
    font-family: var(--font-script);
    font-size: var(--fs-script);
    line-height: 1;
    color: var(--bronze);
  }

  /* ── Ce qui me caractérise ─────────────────────────────────────── */
  .traits { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .trait__ico {
    width: 2.8rem; height: 2.8rem;
    display: grid; place-content: center;
    border-radius: 50%;
    background: var(--grad-gold);
    box-shadow: 0 4px 14px rgba(201,162,39,.35);
    margin-bottom: 1.1rem;
  }
  .trait__ico svg { width: 18px; height: 18px; color: var(--ink); }
  .trait .muted { color: var(--on-ink-mut); }

  /* ── Appel final ───────────────────────────────────────────────── */
  .about-cta .btn-row { justify-content: center; }

  @media (prefers-reduced-motion: reduce) {
    .about-card, .about-card figure { animation: none; }
  }
}