/* Moderne Love — bundle autonome pour déploiement */

/* --- fonts --- */
/* Moderne Love — Webfonts
   Playfair Display (display serif) + Nunito (body sans).
   Loaded from Google Fonts CDN. To self-host, download the woff2 files into
   assets/fonts/ and replace the @import below with local @font-face rules. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* --- colors --- */
/* Moderne Love — Color tokens
   A strict noir-et-blanc system. Black is the only "accent"; warmth comes
   from an ivory paper tone rather than pure white on large surfaces. */

:root {
  /* ---- Ink (blacks & greys) ---- */
  --ink-900: #0B0B0B; /* near-black — primary text, dark sections */
  --ink-800: #171717;
  --ink-700: #2A2A2A;
  --ink-600: #444444;
  --ink-500: #6E6E6E; /* muted / secondary text */
  --ink-400: #949494;
  --ink-300: #C2BEB7; /* borders on paper */
  --ink-200: #E4E0D8; /* hairlines */
  --ink-100: #EFECE5;

  /* ---- Paper (whites & ivories) ---- */
  --paper-900: #F3EFE7; /* deepest ivory */
  --paper:     #F7F4EE; /* default page surface */
  --paper-50:  #FBF9F5; /* lightest ivory */
  --white:     #FFFFFF;

  /* ---- Semantic: text ---- */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-inverse:   var(--paper);
  --text-on-ink:    var(--paper-50);

  /* ---- Semantic: surfaces ---- */
  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-raised: var(--paper-50);
  --surface-ink:    var(--ink-900); /* dark / inverted sections */
  --surface-ink-2:  var(--ink-800);

  /* ---- Semantic: lines & accent ---- */
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-ink:    rgba(255, 255, 255, 0.16); /* hairlines on dark */
  --accent:        var(--ink-900); /* black is the accent */
  --accent-inverse:var(--paper-50);

  /* ---- Overlays (for photography protection gradients) ---- */
  --scrim-strong: rgba(11, 11, 11, 0.62);
  --scrim:        rgba(11, 11, 11, 0.42);
  --scrim-soft:   rgba(11, 11, 11, 0.22);
}

/* --- typography --- */
/* Moderne Love — Typography tokens
   Playfair Display for display/editorial voice, Nunito for body & UI.
   Uppercase letter-spaced labels are a signature motif (see --tracking-label). */

:root {
  /* ---- Families ---- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body: "Nunito", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Weights ---- */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* ---- Fluid display scale (editorial headings, Playfair) ---- */
  --fs-display: clamp(3rem, 1.6rem + 6vw, 6rem); /* @kind other */
  --fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4rem); /* @kind other */
  --fs-h2: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); /* @kind other */
  --fs-h3: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); /* @kind other */
  --fs-h4: 1.3rem; /* @kind other */

  /* ---- Body & UI scale (Nunito) ---- */
  --fs-lead: 1.25rem;   /* @kind other */
  --fs-body: 1.0625rem; /* @kind other */
  --fs-sm: 0.9375rem;   /* @kind other */
  --fs-xs: 0.8125rem;   /* @kind other */
  --fs-label: 0.75rem;  /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight: 1.08;   /* @kind other */
  --lh-heading: 1.18; /* @kind other */
  --lh-snug: 1.4;     /* @kind other */
  --lh-body: 1.7;     /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-display: -0.015em; /* @kind other */
  --tracking-normal: 0; /* @kind other */
  --tracking-wide: 0.04em; /* @kind other */
  --tracking-label: 0.22em;   /* @kind other */
  --tracking-label-sm: 0.14em; /* @kind other */

  /* ---- Semantic roles ---- */
  --text-display-family: var(--font-display); /* @kind font */
  --text-body-family: var(--font-body); /* @kind font */
}

/* --- spacing --- */
/* Moderne Love — Spacing & layout tokens. 4px base, generous editorial rhythm. */

:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 — section padding on large screens */

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
  --container-narrow: 760px; /* @kind spacing */
  --gutter: clamp(1.25rem, 5vw, 5rem); /* @kind spacing */
  --section-y: clamp(3.5rem, 8vw, 8rem); /* @kind spacing */
}

/* --- effects --- */
/* Moderne Love — Effects: radii, borders, shadows, motion.
   Restraint is the brand: minimal rounding, whisper-soft shadows, slow fades. */

:root {
  /* ---- Radii — nearly squared, quietly softened ---- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px; /* used only for tags / small chips */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--border);
  --border-line: 1px solid var(--border-strong);
  --border-ink-hairline: 1px solid var(--border-ink);

  /* ---- Shadows — soft, low, neutral (no color casts) ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(11, 11, 11, 0.18);
  --shadow-lg: 0 24px 60px -28px rgba(11, 11, 11, 0.28);
  --shadow-photo: 0 30px 70px -40px rgba(11, 11, 11, 0.45); /* under imagery */

  /* ---- Photography protection gradients ---- */
  --gradient-scrim-bottom: linear-gradient(to top, var(--scrim-strong) 0%, rgba(11,11,11,0) 62%);
  --gradient-scrim-full: linear-gradient(to top, var(--scrim) 0%, rgba(11,11,11,0.05) 50%, var(--scrim-soft) 100%);
  --duotone-filter: grayscale(100%) contrast(1.02); /* @kind other */

  /* ---- Motion — slow, refined, no bounce ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 320ms; /* @kind other */
  --dur-slow: 620ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink-900);
}

/* --- base --- */
/* Moderne Love — Base element styling & utility helpers.
   Opt-in: these set sensible defaults for specimen cards and UI kits. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings: Playfair Display ---- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; text-wrap: pretty; }

/* ---- Links ---- */
a { color: var(--ink-900); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-standard); }
a:hover { opacity: 0.6; }

/* ============================================================
   Utility / motif helpers
   ============================================================ */

/* Signature uppercase letter-spaced label (the "AGENCE DE RENCONTRES" motif) */
.ml-label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* The logo lockup: "moderne" italic serif + "love" bold sans */
.ml-wordmark { font-size: 2rem; line-height: 1; white-space: nowrap; }
.ml-wordmark em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
}
.ml-wordmark strong {
  font-family: var(--font-body);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
}

/* Display / editorial serif text */
.ml-display { font-family: var(--font-display); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.ml-serif-italic { font-family: var(--font-display); font-style: italic; }

/* Lead paragraph */
.ml-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--text-secondary); }

/* Thin editorial rule */
.ml-rule { border: 0; border-top: var(--border-hairline); margin: var(--space-6) 0; }
.ml-rule--ink { border-top: var(--border-ink-hairline); }

/* Keep imagery black & white */
.ml-bw { filter: var(--duotone-filter); }

/* Dark section helper */
.ml-on-ink { background: var(--surface-ink); color: var(--text-on-ink); }
.ml-on-ink h1, .ml-on-ink h2, .ml-on-ink h3, .ml-on-ink h4 { color: var(--paper-50); }
.ml-on-ink .ml-label { color: rgba(247,244,238,0.62); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}