/* ════════════════════════════════════════════════════════════════════
   Win'Event — components.css
   Header, nav, footer, boutons, cartes, annotations, et l'ÉLÉMENT
   SIGNATURE : le coup de pinceau doré (révélation, soulignement, halo).
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ═══════════════════════════════════════════════════════════════
     TITRE RÉVÉLÉ AU PINCEAU  (élément signature)
     — le texte est dévoilé par un essuyage brossé (clip-path),
       souligné par un coup de pinceau doré qui se déploie (scaleX).
     ═══════════════════════════════════════════════════════════════ */
  .brush-title { position: relative; display: inline-block; }
  .brush-title .btext {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--dur-brush) var(--ease-brush);
  }
  .brush-title.is-revealed .btext { clip-path: inset(0 -3% 0 0); }

  /* Coup de pinceau doré sous le titre */
  .brush-title::after {
    content: "";
    position: absolute;
    left: 0.02em;
    bottom: -0.22em;
    width: min(3.6em, 100%);
    height: 0.3em;
    background: var(--grad-gold);
    -webkit-mask: url("../svg/brush.svg") no-repeat left center / 100% 100%;
    mask: url("../svg/brush.svg") no-repeat left center / 100% 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-brush) var(--ease-brush) 90ms;
    pointer-events: none;
  }
  .brush-title.is-revealed::after { transform: scaleX(1); }
  .brush-title--center { display: block; text-align: center; }
  .brush-title--center::after { left: 50%; transform: translateX(-50%) scaleX(0); }
  .brush-title--center.is-revealed::after { transform: translateX(-50%) scaleX(1); }

  /* Mot en or (texturé, jamais aplat) */
  .gold-text {
    background: var(--grad-gold);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShift 9s ease-in-out infinite alternate;
  }
  @keyframes goldShift { to { background-position: 100% 0; } }

  /* Signature manuscrite (usage rare) */
  .script { font-family: var(--font-script); font-weight: 400; line-height: 1; }
  .script--gold { color: var(--gold); }

  @media (prefers-reduced-motion: reduce) {
    .brush-title .btext { clip-path: none; }
    .brush-title::after { transform: scaleX(1); }
    .brush-title--center::after { transform: translateX(-50%) scaleX(1); }
    .gold-text { animation: none; background-position: 0 0; }
  }

  /* ═══════════════════════════════════════════════════════════════
     BOUTONS  (jamais d'aplat doré : contour + pinceau au survol)
     ═══════════════════════════════════════════════════════════════ */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.85rem 1.6rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    border-radius: var(--r-pill);
    isolation: isolate;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out),
                color var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
    overflow: hidden;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  /* Primaire : contour or, se remplit d'un coup de pinceau au survol */
  .btn--primary {
    color: var(--gold);
    border: 1px solid rgba(201,162,39,.55);
  }
  .section--chalk .btn--primary { color: var(--bronze); border-color: rgba(138,107,31,.5); }
  .btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-gold);
    -webkit-mask: url("../svg/brush.svg") no-repeat center / 130% 130%;
    mask: url("../svg/brush.svg") no-repeat center / 130% 130%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-mid) var(--ease-brush);
  }
  .btn--primary:hover, .btn--primary:focus-visible {
    color: var(--ink);
    border-color: transparent;
    box-shadow: var(--shadow-gold);
  }
  .btn--primary:hover::before, .btn--primary:focus-visible::before { transform: scaleX(1); }

  /* Ghost : lien fléché, discret */
  .btn--ghost {
    padding-inline: 0.4rem;
    color: currentColor;
  }
  .btn--ghost .arrow { transition: transform var(--dur-mid) var(--ease-out); }
  .btn--ghost:hover .arrow { transform: translateX(4px); }
  .section--ink .btn--ghost { color: var(--champagne); }
  .section--chalk .btn--ghost { color: var(--bronze); }

  /* Or plein — action principale (« claque »), une seule par écran */
  .btn--gold {
    color: var(--ink);
    background: var(--grad-gold);
    background-size: 180% 100%;
    border: 1px solid transparent;
    box-shadow: 0 8px 26px rgba(201,162,39,.4);
    animation: goldShift 8s ease-in-out infinite alternate;
  }
  .btn--gold:hover, .btn--gold:focus-visible { color: var(--ink); box-shadow: 0 12px 34px rgba(201,162,39,.55); }

  .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

  @media (prefers-reduced-motion: reduce) {
    .btn--primary::before { display: none; }
    .btn--primary:hover, .btn--primary:focus-visible { color: var(--gold); border-color: var(--gold); }
  }

  /* ═══════════════════════════════════════════════════════════════
     HEADER & NAVIGATION
     ═══════════════════════════════════════════════════════════════ */
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    transition: background-color var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out),
                backdrop-filter var(--dur-mid) var(--ease-out);
    border-bottom: 1px solid transparent;
  }
  .site-header.is-scrolled {
    background-color: rgba(12,11,10,.82);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--line-ink);
  }
  .site-header__inner {
    width: var(--container-wide);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem);
  }
  .brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--on-ink);
  }
  .brand .brand__star { width: 1rem; height: 1rem; color: var(--gold); }
  .brand__logo { height: clamp(58px, 5.2vw, 84px); width: auto; display: block; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .brand:hover .brand__logo { opacity: 0.85; transform: scale(1.03); }
  .brand:hover { color: var(--champagne); }

  .nav { display: flex; align-items: center; gap: clamp(1.2rem, 0.5rem + 2vw, 2.6rem); }
  .nav__list { display: flex; align-items: center; gap: clamp(1.2rem, 0.5rem + 2vw, 2.4rem); list-style: none; }
  .nav__link {
    position: relative;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-ink);
    padding-block: 0.4rem;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 10px;
    background: var(--grad-gold);
    -webkit-mask: url("../svg/brush.svg") no-repeat center / 100% 100%;
    mask: url("../svg/brush.svg") no-repeat center / 100% 100%;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-mid) var(--ease-brush);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: var(--champagne); }

  /* Bouton burger (mobile) */
  .nav-toggle {
    display: none;
    width: 48px; height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--on-ink);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: "";
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast);
  }
  .nav-toggle__bars::before { transform: translateY(-7px); }
  .nav-toggle__bars::after  { transform: translateY(5px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

  @media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .nav {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(86vw, 360px);
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2rem;
      padding: 2rem clamp(1.5rem, 6vw, 3rem);
      background: var(--ink-2);
      border-left: 1px solid var(--line-ink);
      transform: translateX(100%);
      transition: transform var(--dur-mid) var(--ease-out);
      z-index: var(--z-menu);
    }
    .nav.is-open { transform: translateX(0); }
    .nav__list { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
    .nav__link { font-size: 1.05rem; }
    .nav .btn { align-self: flex-start; }
    .nav-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(12,11,10,.55);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
      z-index: calc(var(--z-menu) - 1);
    }
    .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  }

  /* ═══════════════════════════════════════════════════════════════
     CARTES : prestations, étapes, aperçu
     ═══════════════════════════════════════════════════════════════ */
  .card {
    position: relative;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
    border-radius: var(--r-lg);
    background: var(--ink-3);
    border: 1px solid var(--line-ink);
    transition: transform var(--dur-mid) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
  }
  .section--chalk .card { background: #fff; border-color: var(--line-chalk); box-shadow: var(--shadow-1); }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold);
    border-color: rgba(201,162,39,.4);
  }
  .card__title { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
  .card__list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
  .card__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--fs-body);
    color: var(--on-ink-mut);
  }
  .section--chalk .card__list li { color: var(--on-chalk-mut); }
  .card__list li::before {
    content: "";
    position: absolute; left: 0; top: 0.55em;
    width: 0.7rem; height: 2px;
    background: var(--grad-gold);
  }

  /* Picto au trait (dessiné, cohérent avec les annotations) */
  .picto {
    width: 3rem; height: 3rem;
    color: var(--gold);
    margin-bottom: 1rem;
  }
  .picto path, .picto circle, .picto line, .picto polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Étapes numérotées (séquence réelle) */
  .step { position: relative; padding-top: 0.5rem; }
  .step__num {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201,162,39,.7);
    display: block;
    margin-bottom: 0.6rem;
  }
  .step__title { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
  .step__text { color: var(--on-chalk-mut); font-size: var(--fs-body); }
  .section--ink .step__text { color: var(--on-ink-mut); }

  /* ═══════════════════════════════════════════════════════════════
     ANNOTATIONS manuscrites (2 max par écran) & médias
     ═══════════════════════════════════════════════════════════════ */
  .annot { position: absolute; color: var(--gold); pointer-events: none; opacity: 0.9; }
  .annot svg { width: 100%; height: 100%; }
  .annot path, .annot line, .annot polyline {
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .media-frame {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink-3);
  }
  .media-frame img { width: 100%; height: 100%; object-fit: cover; }
  .media-frame--tall { aspect-ratio: 4 / 5; }
  .media-frame--wide { aspect-ratio: 3 / 2; }

  /* ═══════════════════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════════════════ */
  .site-footer {
    background: var(--ink);
    color: var(--on-ink);
    padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
  }
  .site-footer a { color: var(--on-ink-mut); }
  .site-footer a:hover { color: var(--champagne); }
  .footer-grid {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .footer-brand .brand { font-size: 1.8rem; margin-bottom: 1rem; }
  .footer-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--champagne);
    margin-bottom: 1rem;
  }
  .footer-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
  .footer-social { display: flex; gap: 1rem; margin-top: 1rem; }
  .footer-social a {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-ink); border-radius: var(--r-pill);
    color: var(--champagne);
    transition: border-color var(--dur-mid), transform var(--dur-fast);
  }
  .footer-social a:hover { border-color: var(--gold); transform: translateY(-2px); }
  .footer-social svg { width: 20px; height: 20px; }
  .footer-bottom {
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-ink);
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    justify-content: space-between;
    font-size: var(--fs-small);
    color: var(--on-ink-mut);
  }
  .footer-bottom a { color: var(--on-ink-mut); text-decoration: underline; text-decoration-color: transparent; }
  .footer-bottom a:hover { text-decoration-color: var(--champagne); }

  /* ═══════════════════════════════════════════════════════════════
     DIVERS : badge, verrou du scroll, visuellement caché
     ═══════════════════════════════════════════════════════════════ */
  .badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(201,162,39,.4);
    border-radius: var(--r-pill);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--champagne);
  }
  .badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  body.is-locked { overflow: hidden; }

  /* ═══════════════════════════════════════════════════════════════
     EFFETS DYNAMIQUES (recadrage) — transform/opacity, injectés par
     motion.js, entièrement neutralisés en prefers-reduced-motion.
     ═══════════════════════════════════════════════════════════════ */

  /* Barre de progression de lecture */
  .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: calc(var(--z-header) + 5); pointer-events: none; background: rgba(201,162,39,.10); }
  .scroll-progress__fill { display: block; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--grad-gold); box-shadow: 0 0 12px rgba(201,162,39,.55); will-change: transform; }

  /* Aurora dorée + étincelles du hero */
  .hero__aurora { position: absolute; inset: -25%; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .55;
    background: radial-gradient(38% 38% at 28% 32%, rgba(201,162,39,.30), transparent 70%), radial-gradient(32% 32% at 74% 62%, rgba(234,217,160,.20), transparent 70%);
    animation: auroraDrift 20s ease-in-out infinite alternate; }
  @keyframes auroraDrift { to { transform: translate3d(5%, -4%, 0) scale(1.12); } }
  .hero__sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .spark { position: absolute; color: var(--gold); opacity: 0; animation: sparkFloat var(--sp-dur, 7s) ease-in-out var(--sp-del, 0s) infinite; filter: drop-shadow(0 0 6px rgba(201,162,39,.55)); }
  .spark svg { width: 100%; height: 100%; }
  .spark--1 { top: 18%; left: 12%; width: 20px; --sp-dur: 7s;   --sp-del: 0s; }
  .spark--2 { top: 30%; left: 45%; width: 13px; --sp-dur: 9s;   --sp-del: 1.5s; }
  .spark--3 { top: 63%; left: 20%; width: 24px; --sp-dur: 8s;   --sp-del: .8s; }
  .spark--4 { top: 47%; left: 61%; width: 12px; --sp-dur: 10s;  --sp-del: 2.2s; }
  .spark--5 { top: 22%; left: 72%; width: 18px; --sp-dur: 7.5s; --sp-del: 3s; }
  .spark--6 { top: 75%; left: 52%; width: 15px; --sp-dur: 8.5s; --sp-del: 1.1s; }
  @keyframes sparkFloat {
    0%   { opacity: 0;  transform: translateY(12px) scale(.5) rotate(0deg); }
    25%  { opacity: .9; }
    50%  { transform: translateY(-16px) scale(1) rotate(25deg); }
    75%  { opacity: .45; }
    100% { opacity: 0;  transform: translateY(12px) scale(.5) rotate(0deg); }
  }

  /* Cartes : spotlight doré + tilt 3D (transform piloté par motion.js) */
  .card { transform-style: preserve-3d; }
  .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(234,217,160,.22), transparent 60%);
    mix-blend-mode: screen; transition: opacity var(--dur-mid) var(--ease-out); }
  .card:hover::after { opacity: 1; }

  /* Révélations directionnelles */
  [data-reveal="left"]  { transform: translateX(-30px); }
  [data-reveal="right"] { transform: translateX(30px); }
  [data-reveal="scale"] { transform: scale(.94); }
  [data-reveal="left"].is-revealed, [data-reveal="right"].is-revealed, [data-reveal="scale"].is-revealed { transform: none; }

  /* Séparateur pinceau qui se dessine au scroll */
  .brush-divider { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-brush) var(--ease-brush); }
  .brush-divider.is-revealed { transform: scaleX(1); }

  /* Galerie : entrée échelonnée — activée par gallery.js via .reveal-ready.
     Sans ce marqueur (JS absent/périmé), les créations restent VISIBLES. */
  .gallery-grid.reveal-ready .creation { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  .gallery-grid.reveal-ready .creation.is-in { opacity: 1; transform: none; }
  .lightbox__figure.lb-anim { animation: lbZoom .42s var(--ease-out); }
  @keyframes lbZoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

  .no-js .brush-divider { transform: scaleX(1); }
  .no-js .creation { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .hero__aurora, .spark { animation: none; opacity: 0; }
    .brush-divider { transform: scaleX(1); }
    .creation { opacity: 1; transform: none; }
    .scroll-progress { display: none; }
    .card { transform: none !important; }
  }
}