/* A. Fraunces auto-hébergée : swap évite le texte invisible (FOIT), pas de requête tierce. */
@font-face{font-family:'Fraunces';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/fraunces-500.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/fraunces-700.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/fraunces-800.woff2) format('woff2')}

/* B. Serif chaleureux ; ss01/ss02 = formes alternatives plus expressives. */
.font-fraunces{font-family:'Fraunces',ui-serif,Georgia,serif;font-feature-settings:'ss01','ss02'}

/* C. Mesh bordeaux : plusieurs blobs radiaux superposés (profondeur sans image lourde).
   Blob #EEFAC0 à 8% en haut à droite = reflet chaud. Couleur unie = repli. */
.mesh-bg-primary{
  background-color:#5F0F40;
  background-image:
    radial-gradient(ellipse 45% 40% at 85% 12%,rgba(238,250,192,.08),transparent 70%),
    radial-gradient(circle at 15% 20%,#7a1a56 0,transparent 45%),
    radial-gradient(circle at 80% 75%,#7a1a56 0,transparent 50%),
    radial-gradient(circle at 40% 95%,#4a0b31 0,transparent 50%),
    radial-gradient(circle at 60% 40%,#6a1449 0,transparent 55%);
  background-size:180% 180%;
  background-position:0% 0%;
}

/* D. Mesh clair : base rose très pâle, blobs primaryMuted discrets (6-10%) pour rester lisible. */
.mesh-bg-light{
  background-color:#F9F1F3;
  background-image:
    radial-gradient(circle at 10% 15%,rgba(122,26,86,.10),transparent 45%),
    radial-gradient(circle at 90% 60%,rgba(122,26,86,.07),transparent 50%),
    radial-gradient(circle at 45% 100%,rgba(122,26,86,.06),transparent 45%);
  background-size:170% 170%;
  background-position:0% 0%;
}

/* Mouvement : uniquement si l'utilisateur ne demande pas de réduire les animations. Seul background-position bouge. */
@media (prefers-reduced-motion:no-preference){
  @keyframes mesh-flow{
    0%,100%{background-position:0% 0%}
    33%{background-position:100% 40%}
    66%{background-position:40% 100%}
  }
  .mesh-bg-primary{animation:mesh-flow 20s ease-in-out infinite}
  .mesh-bg-light{animation:mesh-flow 26s ease-in-out infinite}
}

/* E. Grain : feTurbulence en data-URI (0 requête) casse le banding des dégradés et ajoute du papier.
   Opacité très basse ; soft-light sur fond sombre (overlay y serait trop agressif). */
.noise-overlay{position:relative;isolation:isolate}
.noise-overlay::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03;mix-blend-mode:overlay;
}
.mesh-bg-primary.noise-overlay::after{opacity:.05;mix-blend-mode:soft-light}

/* F. Typo hero : graisse 700, interlettrage serré (gros corps), axe optique pour des empattements fins.
   L'accent passe en italique léger et petit opsz : contraste de rythme avec le reste du titre. */
.hero-h1-fraunces{
  font-family:'Fraunces',ui-serif,Georgia,serif;font-weight:700;letter-spacing:-.02em;
  font-optical-sizing:auto;font-feature-settings:'ss01','ss02';font-variation-settings:'opsz' 144;
}
.hero-accent-serif{font-style:italic;font-weight:500;font-variation-settings:'opsz' 24;letter-spacing:-.01em}

/* G. Vignette : coins assombris, l'oeil reste au centre. Sous le contenu (z-index 0, non cliquable). */
.hero-vignette{position:relative}
.hero-vignette::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(15,27,36,.35) 100%);
}