/* ============================================================
   Maison Éphémère — Landing page
   Export de la maquette Pencil (traiteurmaquette.pen)
   ============================================================ */

:root {
  /* Couleurs (variables de la maquette) */
  --anthracite: var(--wp--preset--color--primary, #13243C);
  --bg-cream: var(--wp--preset--color--bg, #FAFAF8);
  --bg-gray: var(--wp--preset--color--bg-alt, #F5F5F3);
  --border-subtle: var(--wp--preset--color--border, #E8E8E3);
  --brass: var(--wp--preset--color--secondary, #C6A24F);
  --footer-bg: var(--wp--preset--color--primary-dark, #0E1B2E);
  --accent: var(--wp--preset--color--accent, #1E3A5C);          /* "terracotta" dans la maquette */
  --accent-soft: rgba(30, 58, 92, 0.13);
  --text-light: var(--wp--preset--color--light, #E5E5E0);
  --text-muted: var(--wp--preset--color--muted, #9A9A95);
  --text-primary: var(--wp--preset--color--text, #1A1A1A);
  --text-secondary: var(--wp--preset--color--text-secondary, #5C5C58);
  --white: var(--wp--preset--color--white, #FFFFFF);

  /* Typo */
  --serif: var(--wp--preset--font-family--display, "Ysabeau SC", Georgia, serif);
  --sans: var(--wp--preset--font-family--body, "Ysabeau", system-ui, -apple-system, sans-serif);

  --maxw: 1440px;
  --content: 1280px;   /* largeur utile max du contenu (centré sur grands écrans) */
  --side: 80px;        /* gouttière latérale mini (ajustée en responsive) */
  --radius: 2px;
  --radius-pill: 9999px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text-primary);
  background: var(--bg-cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4, p { margin: 0; }

.serif { font-family: var(--serif); }

/* Icônes Material Symbols */
.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  user-select: none;
}

.page { width: 100%; margin: 0 auto; background: var(--bg-cream); overflow-x: clip; }

.section { padding: 80px; }
.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: 2px;
  color: var(--accent); text-transform: uppercase;
}
.h2 { font-family: var(--serif); font-weight: 500; color: var(--text-primary); line-height: 1.15; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; padding: 0 48px;
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo .material-symbols-rounded { color: var(--accent); font-size: 22px; }
.logo .wordmark { font-family: var(--serif); font-size: 24px; font-weight: 500; }

.nav { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav li { list-style: none; }
.nav a { font-size: 15px; color: var(--text-secondary); transition: color .2s; }
.nav a:hover { color: var(--text-primary); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.logo { text-decoration: none; color: inherit; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.phone-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius);
  font-size: 15px; font-weight: 500;
}
.phone-btn .material-symbols-rounded { font-size: 15px; color: var(--text-secondary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius); font-weight: 600; font-size: 15px;
  transition: transform .15s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--white); padding: 11px 20px; }
.btn--brass  { background: var(--brass); color: var(--anthracite); }
.btn--block  { width: 100%; }


/* contenu plafonné (global, ex-CONTENU CENTRÉ) */
.header,
.hero__content,
.section,
.proof,
.platforms,
.simulator,
.zone,
.faq,
.cta,
.footer {
  padding-inline: max(var(--side), calc((100% - var(--content)) / 2));
}
.estimator { right: max(var(--side), calc((100% - var(--content)) / 2)); }


/* --- responsive header (global tokens --side + nav) --- */
@media (max-width: 1100px) { :root { --side: 48px; } .nav { display: none; } }
@media (max-width: 720px)  { :root { --side: 20px; } .header-actions .phone-btn { display: none; } }