/* =========================================================
   Decopierre — Design Tokens & Base
   Mineral · Artisanal · Premium
   ========================================================= */

:root {
  /* Couleurs — Pierre & Matière */
  --ivory:        #FAF6F0;   /* fond principal */
  --stone-50:    #F4ECDF;   /* fond doux */
  --stone-100:   #eee;   /* fond alternatif (gris clair) */
  --stone-200:   #D8C9B4;   /* bordures, séparateurs */
  --stone-300:   #B8A88F;   /* pierre moyenne */
  --stone-400:   #8A7E6A;   /* pierre foncée */
  --stone-500:   #6B635A;   /* texte secondaire */
  --stone-700:   #3F3A33;   /* texte profond */
  --charcoal:    #2A2622;   /* texte principal */

  /* Accent — Terre cuite (par défaut) */
  --accent:      #d9953b;
  --accent-soft: #C28367;
  --accent-deep: #7E4A2D;
  --accent-tint: #F1E5DB;   /* fond accent très clair */

  /* Sémantique */
  --bg:          var(--ivory);
  --bg-alt:      var(--stone-100);
  --bg-card:     #FFFEFB;
  --fg:          var(--charcoal);
  --fg-muted:    var(--stone-500);
  --line:        var(--stone-200);
  --line-strong: var(--stone-300);

  /* Typo — familles */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Échelle typographique (modulaire 1.250) */
  --t-xs:    0.75rem;  /* 12 */
  --t-sm:    0.875rem; /* 14 */
  --t-base:  1rem;     /* 16 */
  --t-md:    1.125rem; /* 18 */
  --t-lg:    1.375rem; /* 22 */
  --t-xl:    1.75rem;  /* 28 */
  --t-2xl:   2.25rem;  /* 36 */
  --t-3xl:   3rem;     /* 48 */
  --t-4xl:   4.25rem;  /* 68 */
  --t-5xl:   5.75rem;  /* 92 */
  --t-6xl:   7.5rem;   /* 120 */

  /* Espacements — densité régulière (par défaut) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  /* Section padding — varie par densité */
  --section-py: clamp(64px, 9vw, 128px);
  --gutter:     clamp(20px, 4vw, 48px);
  --maxw:       1320px;
  --maxw-text:  68ch;

  /* Rayons (sobres) */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* Ombres (douces, chaudes) */
  --shadow-1: 0 1px 2px rgba(42, 38, 34, 0.04), 0 1px 1px rgba(42, 38, 34, 0.03);
  --shadow-2: 0 8px 24px -8px rgba(42, 38, 34, 0.10), 0 2px 6px rgba(42, 38, 34, 0.04);
  --shadow-3: 0 24px 60px -20px rgba(42, 38, 34, 0.18), 0 6px 16px rgba(42, 38, 34, 0.06);

  /* Transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 600ms;
}

/* Densité — compact */
[data-density="compact"] {
  --section-py: clamp(48px, 6vw, 88px);
  --gutter:     clamp(16px, 3vw, 32px);
  --t-4xl: 3.5rem;
  --t-5xl: 4.5rem;
  --t-6xl: 6rem;
}
/* Densité — aérée */
[data-density="airy"] {
  --section-py: clamp(96px, 12vw, 200px);
  --gutter:     clamp(28px, 5vw, 64px);
  --t-4xl: 4.75rem;
  --t-5xl: 6.5rem;
  --t-6xl: 9rem;
}

/* ========= Reset & base ========= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--accent); color: var(--ivory); }

/* ========= Typographie ========= */

.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.012em;
  line-height: 1.05;
  text-wrap: balance;
}
.display-1 { font-size: var(--t-6xl); line-height: 0.95; letter-spacing: -0.025em; }
.display-2 { font-size: var(--t-5xl); line-height: 0.98; letter-spacing: -0.02em; }
.display-3 { font-size: var(--t-4xl); line-height: 1.02; letter-spacing: -0.018em; }

/* Mobile — shrink oversized display headings */
@media (max-width: 782px) {
  .display-1 { font-size: clamp(2.5rem, 12vw, 4.5rem); line-height: 1; }
  .display-2 { font-size: clamp(2rem, 10vw, 3.75rem); line-height: 1.05; }
  .display-3 { font-size: clamp(1.75rem, 8vw, 2.75rem); line-height: 1.1; }
  .display   { word-break: break-word; overflow-wrap: break-word; }
}
.h1 { font-size: var(--t-3xl); }
.h2 { font-size: var(--t-2xl); }
.h3 { font-size: var(--t-xl); }
.h4 { font-size: var(--t-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }
p.lead {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--stone-700);
  max-width: 60ch;
}

/* Eyebrow / overline */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.eyebrow--mute { color: var(--fg-muted); }

/* ========= Layout helpers ========= */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--narrow { max-width: 920px; }
.container--wide   { max-width: 1480px; }

.section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section--tight { padding-top: calc(var(--section-py) * 0.55); padding-bottom: calc(var(--section-py) * 0.55); }
.section--alt   { background: var(--bg-alt); }
.section--dark  {
  background: var(--charcoal);
  color: var(--stone-100);
}
.section--dark .eyebrow { color: var(--accent-soft); }
.section--dark .display,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--ivory);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5);
}
@media (max-width: 800px) {
  .grid-12 { grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
}

.divider-rule {
  display: flex; align-items: center; gap: var(--s-4);
  color: var(--fg-muted);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.divider-rule::before, .divider-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--line-strong);
}

/* ========= Buttons ========= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color    var(--dur-fast) var(--ease),
              border   var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--ivory);
}
.btn--primary:hover { background: var(--accent-deep); }

.btn--dark {
  background: var(--charcoal);
  color: var(--ivory);
}
.btn--dark:hover { background: #181613; }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--charcoal); background: var(--stone-50); }

.btn--link {
  padding: 0;
  background: transparent;
  color: var(--fg);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding-bottom: 4px;
  gap: var(--s-2);
}
.btn--link:hover { color: var(--accent); border-color: var(--accent); }

.btn--lg { padding: 18px 28px; font-size: var(--t-base); }
.btn--sm { padding: 10px 14px; font-size: var(--t-xs); }

.btn .arr { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ========= Form ========= */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0;
  color: var(--fg);
  font-size: var(--t-base);
  outline: 0;
  transition: border var(--dur-fast) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { font-size: var(--t-xs); color: var(--fg-muted); }

/* ========= Reveal animation ========= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ========= Utility ========= */

.muted { color: var(--fg-muted); }
.accent { color: var(--accent); }
.no-wrap { white-space: nowrap; }
.center { text-align: center; }
.serif { font-family: var(--font-display); font-weight: 400; }
.upper-eye {
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ========= Tag / chip ========= */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); letter-spacing: 0.06em;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--fg-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--charcoal); color: var(--fg); }
.chip.is-active {
  background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal);
}

/* ========= Stat ========= */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--fg);
  font-variant-numeric: lining-nums;
}
.stat-label {
  font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); margin-top: var(--s-4);
}
/* Shrink stat numbers on small mobile so the 2x2 grid fits — Yann feedback 02/09 */
@media (max-width: 600px) {
  .stat-num { font-size: clamp(2rem, 12vw, 3.5rem); }
  .stat-label { font-size: 10px; letter-spacing: 0.14em; margin-top: 4px; }
}