/* E.T.D Projects - etd-projects.fr - contact@etd-projects.fr */

/* ============ TOKENS ============ */
:root {
  /* couleurs */
  --color-bg: #ffffff;
  --rose-050: #fdf4f4;
  --rose-100: #fbecec;
  --rose-200: #f7e0e1;
  --rose-300: #f3d5d6;   /* fond hero */
  --rose-block: #f6dede; /* bloc creations */
  --ink: #141210;        /* quasi-noir barres/footer */
  --ink-2: #1c1917;
  --text: #2a2320;
  --text-soft: #4a423d;
  --muted: #8a807a;
  --pink-cta: #f2b6c1;
  --pink-cta-hover: #eca3b1;
  --line: rgba(20, 18, 16, 0.14);
  --line-soft: rgba(20, 18, 16, 0.08);
  --footer-text: #d9d2cd;
  --footer-muted: #9a938d;

  /* typographies */
  --font-brand: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Century Gothic", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* mesures */
  --container: 1240px;
  --gutter: 40px;
  --radius: 2px;
  --shadow-card: 0 18px 40px -24px rgba(20, 18, 16, 0.35);
  --shadow-soft: 0 10px 30px -20px rgba(20, 18, 16, 0.3);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 48px; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; }

/* ============ HELPERS ============ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* titres serif */
.serif {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 500;
}

/* separateur diamant */
.sep-diamond {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
.sep-diamond::before,
.sep-diamond::after {
  content: "";
  height: 1px;
  width: 42px;
  background: currentColor;
  opacity: 0.55;
}
.sep-diamond i {
  width: 9px; height: 9px;
  transform: rotate(45deg);
  border: 1px solid currentColor;
  display: block;
}
.sep-diamond--center { justify-content: center; }