/* ──────────────────────────────────────────────────────────────────
   Mon Puzzle Intérieur — Palette officielle (parchemin chaud, mai 2026)
   Source de vérité commune avec src/brand/palette.ts
   Inclure dans toutes les pages publiques :
     <link rel="stylesheet" href="/assets/brand.css">
   ────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Fonds */
  --bg:           oklch(0.955 0.018 83);   /* papier crème chaud */
  --bg-shadow:    oklch(0.88 0.03 78);     /* sable / bords parchemin */
  --bg-soft:      oklch(0.915 0.028 76);   /* surfaces légèrement enfoncées */
  --bg-card:      oklch(0.945 0.022 83);   /* crème clair — cartes, encadrés */
  --bg-card-soft: oklch(0.925 0.025 80);   /* entre crème et sable */

  /* Textes */
  --text:         #4A3B26;   /* brun foncé chaud — texte courant */
  --text-soft:    #7A6448;   /* brun moyen — texte secondaire */
  --muted:        #7A6448;   /* brun moyen — éléments discrets */
  --muted-2:      #9A7B3E;   /* or profond — hints, labels */

  /* Or — accent principal */
  --gold:         oklch(0.66 0.10 76);
  --gold-light:   oklch(0.74 0.11 82);
  --gold-dark:    oklch(0.52 0.09 68);
  --gold-muted:   oklch(0.46 0.07 66);

  /* Accents secondaires */
  --mauve:        #8B6E4E;   /* brun chaud neutre — accent ponctuel */
  --tension:      #C45A48;   /* rouge — erreurs / aspects tendus */
  --harmony:      #6E8E7A;   /* vert sauge — accords / succès */

  /* États fonctionnels */
  --ok:           #7A9E6A;
  --warn:         #C99A4E;
  --error:        #C45A48;

  /* Bordures dérivées (or profond transparent) */
  --line:         oklch(0.66 0.10 76 / 0.35);
  --line-soft:    oklch(0.66 0.10 76 / 0.18);
  --line-strong:  oklch(0.66 0.10 76 / 0.55);

  /* Lueurs / halos décoratifs */
  --halo-gold:    rgba(232, 185, 104, 0.14);
  --halo-mauve:   rgba(201, 154, 78, 0.10);
  --halo-night:   rgba(74, 59, 38, 0.78);

  /* Gradients réutilisables */
  --grad-gold-cta:    linear-gradient(135deg, #9A7B3E 0%, #E8B968 50%, #9A7B3E 100%);
  --grad-gold-button: linear-gradient(135deg, #C99A4E 0%, #E8B968 100%);
  --grad-night:       linear-gradient(180deg, #D4BD9E 0%, #E8D7C3 60%, #F2E7D8 100%);

  /* Typographie */
  --font-serif: 'Cormorant Garamond', 'Cardo', Georgia, serif;
  --font-sans:  'Mona Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:  'Spectral', Georgia, serif;
  --font-caps:  'Cinzel', 'Cardo', Georgia, serif;

  /* ── Alias rétrocompat v2 → v3 ─────────────────────────────────────
     À retirer une fois toutes les pages refactorées. */
  --bg-2:        var(--bg-soft);
  --card:        var(--bg-card);
  --card-2:      var(--bg-card-soft);
  --border:      var(--line);
  --border-soft: var(--line-soft);
  --gold-soft:   var(--gold-dark);
  --ivory:       var(--text);
  --ivory-soft:  var(--text-soft);
  --ivory-muted: var(--muted);
  --bg-deeper:   var(--bg-shadow);
  --teal-accent: var(--mauve);

  /* ── Aliases v3 ─────────────────────────────────────────────────── */
  --night-1:     var(--bg);
  --night-2:     var(--bg-soft);
  --night-3:     var(--bg-shadow);
  --night-deep:  #4A3B26;   /* brun foncé — texte sur bouton or, contrasté */
  --mute:        var(--muted);
  --mute-2:      var(--muted-2);
  /* Cuivre patiné → unifié sur l'or de la palette */
  --copper:      #C99A4E;
  --copper-dark: #9A7B3E;
  --copper-deep: #7A6448;
  --copper-glow: rgba(201, 154, 78, 0.15);
  --rule:        oklch(0.66 0.10 76 / 0.35);
  --rule-strong: oklch(0.66 0.10 76 / 0.55);
  --serif:       var(--font-serif);
  --sans:        var(--font-sans);

  /* ── Direction A — Grand Œuvre ─────────────────────────────── */
  --bg-glow:     oklch(0.97 0.03 88 / 0.9);
  --ink:         oklch(0.34 0.03 62);
  --ink-soft:    oklch(0.46 0.026 64);
  --ink-faint:   oklch(0.58 0.022 66);
  --gold-bright: oklch(0.74 0.11 82);
  --gold-deep:   oklch(0.52 0.09 68);
  --paper:       oklch(0.945 0.022 83);
  --paper-edge:  oklch(0.88 0.03 78);
  --btn-ink:     oklch(0.99 0.01 85);
  --trail-ink:   oklch(0.40 0.055 52);
  --map-op:      0.52;
  --ghost-op:    0.07;
}

/* Helpers de famille */
.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans);  }

/* Fond de page commun avec lueurs radiales discrètes */
.brand-bg {
  background:
    radial-gradient(ellipse 1100px 700px at 70% -10%, var(--halo-gold) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 10% 110%, var(--halo-mauve) 0%, transparent 55%),
    var(--bg);
}

/* ── Logos fantômes en fond ─────────────────────────────────────────── */
.ambiance-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.ghost-logo{
  position:absolute;
  opacity:var(--ghost-op,0.07);
  pointer-events:none;
  mix-blend-mode:multiply;
  display:block;
}

/* ── Parchemin : 3 couches de texture (position:fixed, derrière tout) ─── */
.parch-mottle,.parch-fiber,.parch-edge{
  position:fixed;inset:0;pointer-events:none;z-index:0;
}
.parch-mottle{
  mix-blend-mode:multiply;opacity:.85;
  background-image:
    radial-gradient(120% 90% at 18% 8%, color-mix(in oklch,var(--paper-edge) 60%,transparent),transparent 58%),
    radial-gradient(110% 80% at 88% 96%, color-mix(in oklch,var(--paper-edge) 55%,transparent),transparent 55%),
    radial-gradient(70% 55% at 72% 30%, color-mix(in oklch,var(--bg-soft) 50%,transparent),transparent 62%),
    radial-gradient(60% 50% at 30% 70%, color-mix(in oklch,var(--bg-soft) 38%,transparent),transparent 64%);
}
.parch-fiber{
  mix-blend-mode:multiply;opacity:.55;background-size:560px 560px,560px 560px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.008' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
}
.parch-edge{
  mix-blend-mode:multiply;opacity:.9;
  background:radial-gradient(140% 120% at 50% 50%, transparent 60%,
    color-mix(in oklch,var(--paper-edge) 70%,transparent) 88%,
    color-mix(in oklch,var(--bg-soft) 80%,transparent) 100%);
}

/* ── Décor carte au trésor ──────────────────────────────────── */
.trail-dots{animation:trail 38s linear infinite;}
@keyframes trail{to{stroke-dashoffset:-270;}}
@media (prefers-reduced-motion:reduce){
  .trail-dots{animation:none;}
  .logo-hero,.logo-hero::before{animation:none!important;}
}