/*
  FaceMe — COUCHE MARQUE partagée par les deux maisons (Kali, 2026-09-26).

  Deux pièces, et rien d'autre : le voile d'ouverture (logo deux couleurs
  redessiné, « Join the movement #FaceMeCommunity ») et le bouton de musique.
  Elles appartiennent au GROUPE, pas à une maison : ce fichier n'est importé
  par aucun bundle, il est lié tel quel par index.html ET wellness.html. Ses
  tokens sont préfixés --fm-b- et ne vivent qu'ici (Loi #2 : aucune maison ne
  lit ceux de l'autre, et aucune ne lit ceux-ci).

  Pourquoi un fichier servi et pas du style en ligne : la CSP de www
  (public/_headers) n'autorise que les feuilles et scripts de l'origine.

  DEUX DURÉES (Kali, 2026-09-27) — brand.js pose la classe avant le rendu :
    · .fm-veil-long  : la première page d'une visite, quelle qu'elle soit (≈ 2,5 s) ;
    · (par défaut)   : le passage d'une maison à l'autre (≈ 1,6 s) ;
    · .fm-veil-seen  : toute autre page — pas de voile.
  Chronologie commune (rien ne boucle — Loi #4) :
    0,00 → 0,55  l'anneau d'or se trace
    0,15 → 0,85  FACEME, WELLNESS GROUP, JOIN THE MOVEMENT montent
    0,55 → 1,15  #FaceMeCommunity arrive, en gras, puis une lumière le traverse
    court : 1,15 le logo s'efface, 1,20 → 1,60 les battants s'ouvrent
    long  : 2,05 le logo s'efface, 2,10 → 2,50 les battants s'ouvrent
  Un appui ou une touche ouvre les battants tout de suite (.fm-veil--skip).
  reduced-motion : le logo est posé d'emblée, le voile se retire en fondu.
*/

@font-face {
  font-family: 'FM Brand Serif';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('/fonts/cormorant-garamond-var.woff2') format('woff2');
}
@font-face {
  font-family: 'FM Brand Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: block;
  src: url('/fonts/jost-var.woff2') format('woff2');
}

:root {
  --fm-b-night: #0b0906;
  --fm-b-night-lift: #1b150d;
  --fm-b-night-deep: #040302;
  --fm-b-ivory: #f4eee3;
  --fm-b-ivory-lift: #fffbf3;
  --fm-b-ivory-deep: #e6dccb;
  --fm-b-gold: #c9a661;
  --fm-b-gold-lite: #f3e2b0;
  --fm-b-gold-deep: #8a6a2e;
  --fm-b-gold-ink: #6e5328;
  /* La signature #FaceMeCommunity : l'or poussé vers le champagne et l'or rose
     sur la nuit, vers le bronze et le cuivre sur l'ivoire. */
  --fm-b-champagne: #fff1c9;
  --fm-b-rose: #eab49a;
  --fm-b-copper: #9b5a36;
  --fm-b-bronze: #4f3614;
  --fm-b-ease-draw: cubic-bezier(0.65, 0, 0.25, 1);
  --fm-b-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fm-b-ease-pop: cubic-bezier(0.2, 1.35, 0.35, 1);
  --fm-b-ease-door: cubic-bezier(0.7, 0, 0.2, 1);
  --fm-b-z-veil: 2147483000;
  --fm-b-z-sound: 60; /* au-dessus de la pilule Book (50), sous le menu (70) */
}

/* ─────────────────────────────── Le voile ─────────────────────────────── */

.fm-veil {
  position: fixed;
  inset: 0;
  z-index: var(--fm-b-z-veil);
  overflow: hidden;
  animation: fm-veil-gone 0s linear 1.6s forwards;
}
/* Rien à rejouer sur cette page : brand.js pose la classe avant le premier rendu. */
.fm-veil-seen .fm-veil {
  display: none;
}

.fm-veil__door {
  position: absolute;
  inset-block: 0;
  inline-size: 50%;
  will-change: transform;
}
.fm-veil__door--l {
  inset-inline-start: 0;
  inline-size: calc(50% + 2px); /* glisse sous l'ivoire : jamais de fil clair à la couture */
  background: radial-gradient(120% 90% at 85% 45%, var(--fm-b-night-lift) 0%, var(--fm-b-night) 55%, var(--fm-b-night-deep) 100%);
  animation: fm-door-l 0.4s var(--fm-b-ease-door) 1.2s forwards;
}
.fm-veil__door--r {
  inset-inline-end: 0;
  background: radial-gradient(120% 90% at 15% 45%, var(--fm-b-ivory-lift) 0%, var(--fm-b-ivory) 55%, var(--fm-b-ivory-deep) 100%);
  animation: fm-door-r 0.4s var(--fm-b-ease-door) 1.2s forwards;
}

.fm-veil__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: fm-mark-out 0.2s ease-in 1.15s forwards;
}
.fm-veil__mark svg {
  display: block;
  inline-size: min(86vw, 56vh);
  block-size: auto;
  overflow: visible;
}

/* Première page de la visite : on laisse le logo, et la signature, respirer. */
.fm-veil-long .fm-veil { animation-delay: 2.5s; }
.fm-veil-long .fm-veil__mark { animation-delay: 2.05s; }
.fm-veil-long .fm-veil__door--l,
.fm-veil-long .fm-veil__door--r { animation-delay: 2.1s; }

/* Matières */
.fm-veil .fm-b-stop-deep { stop-color: var(--fm-b-gold-deep); }
.fm-veil .fm-b-stop-gold { stop-color: var(--fm-b-gold); }
.fm-veil .fm-b-stop-lite { stop-color: var(--fm-b-gold-lite); }
.fm-veil .fm-b-stop-fade { stop-color: var(--fm-b-gold); stop-opacity: 0; }
.fm-veil .fm-b-stop-champagne { stop-color: var(--fm-b-champagne); }
.fm-veil .fm-b-stop-rose { stop-color: var(--fm-b-rose); }
.fm-veil .fm-b-stop-copper { stop-color: var(--fm-b-copper); }
.fm-veil .fm-b-stop-bronze { stop-color: var(--fm-b-bronze); }
.fm-veil .fm-b-glow-light { flood-color: var(--fm-b-gold); flood-opacity: 0.55; }

.fm-veil__ring,
.fm-veil__arc,
.fm-veil__rule {
  fill: none;
  stroke: url(#fm-b-gold);
}
.fm-veil__ring { stroke-width: 17; }
.fm-veil__arc { stroke-width: 3.2; stroke-linecap: round; }
.fm-veil__rule { stroke: url(#fm-b-rule); stroke-width: 1.6; }

.fm-veil__word {
  font-family: 'FM Brand Serif', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  fill: url(#fm-b-sheen);
}
.fm-veil__group {
  font-family: 'FM Brand Serif', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  fill: url(#fm-b-gold);
}
.fm-veil__join {
  font-family: 'FM Brand Sans', 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
}
/* Le texte qui chevauche la couture prend la couleur lisible de chaque battant. */
.fm-veil__on-night { fill: var(--fm-b-ivory); }
.fm-veil__on-ivory { fill: var(--fm-b-night); }
.fm-veil__group.fm-veil__on-ivory { fill: var(--fm-b-gold-ink); }

/* #FaceMeCommunity — la signature (Kali, 2026-09-27 : « plus grand, un jeu de
   couleur artistique et voyant, en gras »). Cormorant au plus gras (600), épaissi
   d'un trait de sa propre matière (paint-order : le trait passe sous le plein) ;
   sur la nuit, un dégradé champagne → or → or rose, allumé d'un halo ; sur
   l'ivoire, bronze → cuivre → or. Le « # » prend la couleur d'accent. */
.fm-veil__tag {
  font-family: 'FM Brand Serif', 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  paint-order: stroke fill;
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.fm-veil__tag.fm-veil__on-night {
  fill: url(#fm-b-tag-night);
  stroke: url(#fm-b-tag-night);
  filter: url(#fm-b-glow);
}
.fm-veil__tag.fm-veil__on-ivory {
  fill: url(#fm-b-tag-ivory);
  stroke: url(#fm-b-tag-ivory);
}
.fm-veil__on-night .fm-veil__hash { fill: var(--fm-b-rose); stroke: var(--fm-b-rose); }
.fm-veil__on-ivory .fm-veil__hash { fill: var(--fm-b-copper); stroke: var(--fm-b-copper); }

/* Entrées */
.fm-veil__ring,
.fm-veil__arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.fm-veil__ring { animation: fm-draw 0.55s var(--fm-b-ease-draw) 0s forwards; }
.fm-veil__arc { animation: fm-draw 0.45s var(--fm-b-ease-draw) 0.25s forwards; }
.fm-veil__arc--b { animation-delay: 0.32s; }

.fm-veil__rise {
  opacity: 0;
  transform: translateY(14px);
  transform-box: fill-box;
  animation: fm-rise 0.45s var(--fm-b-ease-out) forwards;
}
.fm-veil__rise--1 { animation-delay: 0.15s; }
.fm-veil__rise--2 { animation-delay: 0.32s; }
.fm-veil__rise--3 { animation-delay: 0.42s; }

/* La signature arrive la dernière, avec un léger rebond d'échelle. */
.fm-veil__pop {
  opacity: 0;
  transform: translateY(12px) scale(0.86);
  transform-box: fill-box;
  transform-origin: center;
  animation: fm-pop 0.6s var(--fm-b-ease-pop) 0.55s forwards;
}

.fm-veil__rule {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: fm-rule 0.4s var(--fm-b-ease-out) 0.46s forwards;
}

/* Un appui : on ouvre tout de suite (plus spécifique que les deux durées). */
.fm-veil.fm-veil--skip { animation: fm-veil-gone 0s linear 0.36s forwards; }
.fm-veil.fm-veil--skip .fm-veil__mark { animation: fm-mark-out 0.16s ease-in 0s forwards; }
.fm-veil.fm-veil--skip .fm-veil__door--l { animation: fm-door-l 0.34s var(--fm-b-ease-door) 0s forwards; }
.fm-veil.fm-veil--skip .fm-veil__door--r { animation: fm-door-r 0.34s var(--fm-b-ease-door) 0s forwards; }

@keyframes fm-draw { to { stroke-dashoffset: 0; } }
@keyframes fm-rise { to { opacity: 1; transform: none; } }
@keyframes fm-pop { to { opacity: 1; transform: none; } }
@keyframes fm-rule { to { transform: scaleX(1); } }
@keyframes fm-mark-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes fm-door-l { to { transform: translateX(-101%); } }
@keyframes fm-door-r { to { transform: translateX(101%); } }
@keyframes fm-veil-gone { to { visibility: hidden; pointer-events: none; } }
@keyframes fm-veil-fade { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fm-veil__ring,
  .fm-veil__arc,
  .fm-veil__rise,
  .fm-veil__pop,
  .fm-veil__rule,
  .fm-veil__mark,
  .fm-veil__door,
  .fm-veil.fm-veil--skip .fm-veil__mark,
  .fm-veil.fm-veil--skip .fm-veil__door--l,
  .fm-veil.fm-veil--skip .fm-veil__door--r {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
  .fm-veil {
    animation:
      fm-veil-fade 0.3s ease-out 0.9s forwards,
      fm-veil-gone 0s linear 1.2s forwards;
  }
  .fm-veil-long .fm-veil { animation-delay: 1.6s, 1.9s; }
  .fm-veil.fm-veil--skip {
    animation:
      fm-veil-fade 0.2s ease-out 0s forwards,
      fm-veil-gone 0s linear 0.2s forwards;
  }
}

/* ─────────────────────────── Le bouton de musique ─────────────────────────── */

/* Bas-gauche : la pilule Book tient le bas-centre, le pouce droit la trouve. */
.fm-sound {
  position: fixed;
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  inset-block-end: calc(1.4rem + env(safe-area-inset-bottom));
  z-index: var(--fm-b-z-sound);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--fm-b-gold) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fm-b-night) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fm-b-gold);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s var(--fm-b-ease-out),
    transform 0.4s var(--fm-b-ease-out),
    border-color 0.25s ease;
}
/* Au téléphone, la pilule Book (≈ 264 px) arrive à 3 px du bouton : on le monte
   au-dessus d'elle plutôt que de rogner la zone du pouce (Loi #1). */
@media (max-width: 34rem) {
  .fm-sound { inset-block-end: calc(5rem + env(safe-area-inset-bottom)); }
}
.fm-sound[hidden] { display: none; }
.fm-sound.is-in { opacity: 1; transform: none; }
.fm-sound:hover { border-color: var(--fm-b-gold); }
.fm-sound:focus-visible { outline: 2px solid var(--fm-b-gold); outline-offset: 3px; }

.fm-sound__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  block-size: 16px;
}
.fm-sound__bars span {
  inline-size: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: block-size 0.3s var(--fm-b-ease-out), opacity 0.3s ease;
}
.fm-sound__bars span:nth-child(1) { block-size: 7px; }
.fm-sound__bars span:nth-child(2) { block-size: 14px; }
.fm-sound__bars span:nth-child(3) { block-size: 10px; }
.fm-sound__bars span:nth-child(4) { block-size: 5px; }
/* Muet : les barres se couchent — un geste, pas une boucle (Loi #4). */
.fm-sound[aria-pressed='false'] .fm-sound__bars span {
  block-size: 2px;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .fm-sound,
  .fm-sound__bars span { transition: none; }
}